DataTables 获取服务器数据后设置 aoColumns

Question

我正在使用带有服务器端数据的 DataTables 来显示几个带有详细信息的表（扩展子表）。有两种类型的子表，一种是三列，一种是七列。

我想在从服务器检索数据之后并在显示行之前设置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，但是一旦我在回调中，我很难设置列。

我也在阅读以下内容，但没有得到想要的结果。

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

Answer 1

好的，我找到了一个解决方案，虽然它有点绕。基本上我创建了一个包含所有可能列的列变量。我使用此变量设置了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();
        }

    });
}