DataTables獲取服務器數據後設置aoColumns

我正在使用DataTables與服務器端數據來顯示幾個表（擴展子表）。有兩種類型的子表，一種是三列一列，七列。DataTables獲取服務器數據後設置aoColumns

我想從服務器中檢索數據後，在顯示行之前設置值aoColumns，但我很難做到這一點。這是我到目前爲止。

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(); 
    } 

});

基本上我想從服務器趕數據，看看從服務器傳遞一個標誌，設置aoColumns然後繼續正常。有任何想法嗎？我正在查看回調函數http://datatables.net/usage/callbacks，但Im很難在回調中一次性設置列。

我也閱讀以下，但我沒有得到所需的結果。

來源

2013-05-03 RachelC

好吧，我發現雖然它的一點點周圍的解決方案。基本上我創建了一個包含所有可能列的列變量。我使用這個變量設置aoColumns，並且我還將該變量添加到我的aoData並將其發送到服務器。

這裏是我的服務器端的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));

你看，我得到了$ returnArray（我格式化關聯數組表示數據表中的行）正常。然後我遍歷我通過的columns變量。如果mDataProp的值不在我的返回數組中，我只需添加一個空白字符串以使數據表很開心。

因此，如果我在這裏停下來，我的數據表的每行都會有一堆空白列。要隱藏空列，我返回一個$ hiddenColumns數組回到「fnServerData」函數，該函數是獲取數據的ajax調用的回調函數。在這裏，我只是通過我返回的hiddenColumns循環並隱藏它們。用戶沒有明智的:)

這裏是我的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(); 
     } 

    }); 
}

來源

2013-05-03 16:26:45 RachelC

DataTables獲取服務器數據後設置aoColumns

回答

相關問題