6

サーバー側のデータで DataTables を使用して、詳細を含むいくつかのテーブルを表示しています (サブテーブルを展開しています)。サブテーブルには、3 列と 7 列の 2 種類があります。

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

以下も読んでいますが、望ましい結果が得られません。

4

1 に答える 1

2

少し回りくどいですが、解決策を見つけました。基本的に、可能なすべての列を含む列変数を作成します。この変数を使用して設定aoColumnsし、変数を my に追加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が返された配列にない場合は、空の文字列を追加してデータ テーブルを満足させます。

したがって、ここで停止すると、データ テーブルの各行に多数の空白列ができます。空の列を非表示にするために、データを取得する 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();
        }

    });
}
于 2013-05-03T16:26:45.730 に答える