2

jQuery データ テーブルに問題があります。ある時点で、テーブルからすべてのデータをアンロードする必要があります。課題は、テーブルが 2 つの表示列と 2 つの非表示列で構成されていることです。

テーブル：

<table id="resTable">
    <thead>
        <tr>
            <th>Parameter name</th>
            <th>Parameter default value</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

jQuery:

resTable = $('#resTable').dataTable({
    'bPaginate': false,
    'bDestroy': true,
    'bAutoWidth': false,
    'bFilter': false,
    'aaSorting': [[0, 'asc']],
    'bInfo': false,
    'bServerSide': true,
    'sAjaxSource': $('#resTable').attr('data-action-url'),
    'fnServerParams': function (aoData) {
        aoData.push({ 'name': 'stringAppID', 'value': selectedApp['DT_RowId'] });

    },
    'aoColumns': [  { 'mData': 'ParName', 'bSortable': false },
                    { 'mData': 'ParDefVal', 'bSortable': false },
                    { 'mData': 'ResId', 'bSortable': false, 'bVisible': false },
                    { 'mData': 'ResName', 'bSortable': false, 'bVisible': false }
                 ]
                 ,
    'fnDrawCallback': function (oSettings) {
        if (oSettings.aiDisplay.length == 0) {
            return;
        }

        var nTrs = $('tbody tr', oSettings.nTable);
        var iColspan = nTrs[0].getElementsByTagName('td').length;
        var sLastGroup = "";
        for (var i = 0; i < nTrs.length; i++) {
            var iDisplayIndex = oSettings._iDisplayStart + i;
            var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData['ResName'];
            var sGroupId = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData['ResId'];
            if (sGroup != sLastGroup) {
                var nGroup = document.createElement('tr');
                nGroup.className = "Resource";
                nGroup.id = sGroupId;
                var nCell = document.createElement('td');
                nCell.colSpan = iColspan;
                nCell.innerHTML = sGroup;
                nGroup.appendChild(nCell);
                nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
                sLastGroup = sGroup;
            }
        }
    },
    'aaSortingFixed': [[0, 'asc']],
    'aaSorting': [[1, 'asc']],
    'sDom': 'lfr<"giveHeight"t>ip'
});

これは魅力のように機能しています。しかし、空の新しいテーブルをロードしようとすると、あらゆる種類の問題が発生します。

コードのリロード:

resTable = $('#resTable').dataTable({
    'bPaginate': false,
    'bAutoWidth': false,
    'bFilter': false,
    'bInfo': false,
    'bDestroy': true
});
resTable.fnClearTable();

何らかの理由でデータが保持され、jQuery が列 2 のデータを読み取ろうとするとエラーが報告されます。データを消去する方法を見つけることができませんでした。

このアプローチが機能する同様のテーブルがあります。ただし、行のグループ化はありません。

4

1 に答える 1

4

解決策は非常に単純であることがわかりました。最初はこれを見なかったなんて信じられない...

リロード コードに空のデータ ソースを追加しました。

'aaData': []

したがって、リロード コードは次のようになります。

resTable = $('#resTable').dataTable({
    'bPaginate': false,
    'bAutoWidth': false,
    'bFilter': false,
    'bInfo': false,
    'bDestroy': true,
    'aaData': []
});
resTable.fnClearTable();

以前のデータは消去されます。

于 2012-12-19T13:10:25.587 に答える