DataTablesはサーバーデータを取得した後にaoColumnsを設定します

Question

私はサーバー側のデータでDataTableを使用して、複数のテーブル（詳細サブテーブル）を表示しています。サブテーブルには2つのタイプがあり、1つは3つのカラム、もう1つは7つのカラムです。

サーバからデータを取得した後、行が表示される前に値を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はコールバックで一度カラムを設定するのが苦労しています。

私は次のことも読んでいますが、希望の結果が得られません。

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

Answer 1

[OK]を私は約その小さな丸いしかし解決策を見つけました。基本的には、すべての可能な列を持つ列変数を作成します。私はこの変数を使用してaoColumnsを設定し、変数を私のaoDataに加えて、それをサーバに送信します。あなたは、私が通常通り$ returnArray（私のフォーマットされた連想配列を表すデータテーブルの行）を取得することがわかり

$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)); 

：

は、ここに私のサーバー側のPHPコードです。それから、私が渡した変数columnsをループします。 mDataPropの値が返される配列にない場合は、空の文字列を追加してデータテーブルを幸せにするだけです。

ここで私が停止した場合、私のデータテーブルの各行に空白の列がたくさんあります。空の列を非表示にするには、データを取得するajax呼び出しのコールバックである "fnServerData"関数に$ hiddenColumnsの配列を返します。ここでは、返された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(); 
     } 

    }); 
}