jquery - "Wipe"具有Ajax源和行分组的Jquery数据表

Question

我在使用 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 列中的数据时报告错误。我一直无法找到删除数据的方法。

我有类似的表，可以使用此方法。但他们没有行分组。

Answer 1

事实证明，解决方案非常简单。不敢相信我一开始没有看到这个......

刚刚在重新加载代码中添加了一个空数据源:

'aaData': []

所以重新加载代码如下所示:

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

以前的数据现已删除。