DataTables ustawia aoColumns po uzyskaniu danych serwera

Question

Używam DataTables z danymi po stronie serwera do wyświetlania kilku tabel ze szczegółami (rozwijanie tabel podrzędnych). Istnieją dwa rodzaje podtablic: jeden z trzema kolumnami jeden z 7 kolumnami.

Chciałbym ustawić wartość aoColumns po pobraniu danych z serwera i przed wyświetleniem wiersza, ale mam ciężko to zrobić. Oto, co mam do tej pory.

self.createDataTable = function(identifier, source, rowCallback, initCallback) { 
var columnsA = [ 
     { "mDataProp": "index", "sClass": "index", "bSortable": false }, 
     { "mDataProp": "text", "sClass": "top-dd", "bSortable": false }, 
     { "mDataProp": "stats", "sClass": "top-dd stats", "bSortable": false } 
    ]; 
var columnsB = [ 
     { "mDataProp": "index", "sClass": "index", "bSortable": false }, 
     { "mDataProp": "check-box", "sClass": "check-box" }, 
     { "mDataProp": "foundDate", "sClass": "date" }, 
     { "mDataProp": "pageLink", "sClass": "link" }, 
     { "mDataProp": "linkText", "sClass": "text" }, 
     { "mDataProp": "ipAddress", "sClass": "ip" }, 
     { "mDataProp": "otherLinks", "sClass": "more dd-second-" + thisTR.id } 
    ]; 

$(identifier).dataTable({ 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bSort": true, 
    "bInfo": false, 
    "bAutoWidth": false, 
    "oLanguage": { "sEmptyTable": 'No patterns found' }, 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": source, 
    "fnServerParams": function(aoData) { 
     aoData.push({ "name": "uniqueid", "value": self.uniqueid }, 
        { "name": "basedomain", "value": basedomain }, 
        { "name": "return_this", "value": $(this).data('returnid') }); 
    }, 
    "aoColumns": columnsA, 
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {     
     return rowCallback(nRow, aData); 
    }, 
    "fnInitComplete": function(oSettings, iStart, iEnd, iMax, iTotal, sPre) { 
     initCallback(); 
    } 

}); 

Zasadniczo chciałbym złapać danych z serwera, spójrz na fladze przekazywane z serwera, a następnie ustawić aoColumns dalej normalnie. Jakieś pomysły? Przeglądam funkcje wywołania zwrotnego http://datatables.net/usage/callbacks, ale mam trudny czas ustawienie kolumn po Im jestem w wywołanie zwrotne.

Czytam również następujące rzeczy, ale nie uzyskuję pożądanych rezultatów.

• Altering jquery datatables aoColumns
• http://www.datatables.net/usage/columns

Answer 1

Ok znalazłem rozwiązanie choć jego małym rondzie. Zasadniczo tworzę zmienną kolumny ze wszystkimi możliwymi kolumnami. Ustawiłem aoColumns używając tej zmiennej i dodałem zmienną do mojego aoData i wysłałem ją na serwer.

Oto mój server side kod PHP:

$returnArray = $patternHandler->getGroupsForSection($_GET['return_this']); 

if(count($returnArray) > 0) { 
    $hiddenCoulumns = array(); 
    $columns = json_decode($_GET['columns'], true); 
    $testRow = $returnArray[0]; 

    for($i = 0; $i < count($columns); $i++) { 
     if(!isset($testRow[$columns[$i]['mDataProp']])) { 
      foreach($returnArray AS &$row) { 
       $row[$columns[$i]['mDataProp']] = ''; 
       $hiddenCoulumns[] = $i; 
      } 
     } 
    } 
} 

echo json_encode(array(
      'sEcho' => intval($_GET['sEcho']), 
      'iTotalRecords' => count($returnArray), 
      'iTotalDisplayRecords' => count($returnArray), 
      'aaData' => $returnArray, 
      'hiddenColumns' => $hiddenCoulumns)); 

Widać, że dostanę $ returnArray (moje sformatowany asocjacyjna wierszy reprezentujących tabeli danych) jako normalne. Następnie przeglądam zmienną columns, którą przekazałem. Jeśli wartość dla mDataProp nie jest w mojej tablicy zwrotnej, po prostu dodajemy pusty ciąg, aby tablice danych były szczęśliwe.

Więc jeśli zatrzymałbym się tutaj, musiałbym mieć kilka pustych kolumn w każdym wierszu dla mojej tabeli danych. Aby ukryć puste kolumny, zwracam tablicę $ hiddenColumns z powrotem do funkcji "fnServerData", która jest wywołaniem wywołania ajax, które pobiera dane. Tutaj po prostu przechodzę przez moje zwrócone ukryte kolumny i ukrywam je. Użytkownik jest w żaden mądrzejszy :)

Oto mój JavaScript:

self.createDataTable = function(identifier, source, rowCallback, initCallback) { 
    var columns = [ 
     { "mDataProp": "index", "sClass": "index", "bSortable": false }, 
     { "mDataProp": "text", "sClass": "top-dd", "bSortable": false }, 
     { "mDataProp": "stats", "sClass": "top-dd stats", "bSortable": false }, 
     { "mDataProp": "check-box", "sClass": "check-box" }, 
     { "mDataProp": "foundDate", "sClass": "date" }, 
     { "mDataProp": "pageLink", "sClass": "link" }, 
     { "mDataProp": "linkText", "sClass": "text" }, 
     { "mDataProp": "ipAddress", "sClass": "ip" }, 
     { "mDataProp": "otherLinks", "sClass": "more dd-second-" } 
    ]; 

    var patternsTable = $(identifier).dataTable({ 
     "bPaginate": false, 
     "bLengthChange": false, 
     "bFilter": false, 
     "bSort": true, 
     "bInfo": false, 
     "bAutoWidth": false, 
     "oLanguage": { "sEmptyTable": 'No patterns found' }, 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": source, 
     "fnServerData": function (sSource, aoData, fnCallback) { 
      /* Add some extra data to the sender */ 
      aoData.push({ "name": "more_data", "value": "my_value" }); 
      $.getJSON(sSource, aoData, function (json) { 
        /* Get server data callback */ 
        for(var i = 0; i < json.hiddenColumns.length; i++) { 
         patternsTable.fnSetColumnVis(json.hiddenColumns[i], false); 
        } 
        fnCallback(json) 
      }); 
     }, 
     "fnServerParams": function(aoData) { 
      aoData.push({ "name": "uniqueid", "value": self.uniqueid }, 
         { "name": "basedomain", "value": basedomain }, 
         { "name": "return_this", "value": $(this).data('returnid') }, 
         { "name": "columns", "value": JSON.stringify(columns)}); 
     }, 
     "aoColumns": columns, 
     "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {     
      return rowCallback(nRow, aData); 
     }, 
     "fnInitComplete": function(oSettings, iStart, iEnd, iMax, iTotal, sPre) { 
      initCallback(); 
     } 

    }); 
}