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

Question

我正在使用DataTables和服务器端数据来显示带有详细信息的几个表(扩展子表).有两种类型的子表,一种是三列,一列是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但我很难在回调中设置列.

我也在阅读以下内容,但我没有得到预期的结果.

• 更改jquery数据表aoColumns
• http://www.datatables.net/usage/columns

Answer 1

好吧，我找到了一个解决方案，尽管它有点绕。基本上我创建了一个包含所有可能列的列变量。我aoColumns使用此变量进行设置，并将该变量添加到 myaoData并将其发送到服务器。

这是我的服务器端 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 调用的回调。在这里，我只是循环遍历返回的隐藏列并隐藏它们。用户一无所知:)

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

    });
}