"擦拭"使用Ajax源和行分组的Jquery数据表

时间:2012-12-19 12:36:41

标签: jquery datatables

我遇到了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列中的数据时报告错误。我无法找到擦除数据的方法。

我有类似的表,这个approch工作。但他们没有行分组。

1 个答案:

答案 0 :(得分:4)

原来解决方案是,非常简单。不能相信我起初没看到这个......

刚刚为重装代码添加了一个空数据源:

'aaData': []

所以重载代码如下所示:

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

现在已经删除了以前的数据。