CODEWITHSUNDEEP
jquerydatatables
Mikkel Nielsen
Mikkel Nielsen

Reputation: 792

"Wipe" Jquery datatable with Ajax source and row grouping

I'm having problem with a jQuery data table. At some point I need to unload all data from the table. The challange is that the table consists of 2 visible columns and 2 hidden columns.

Table:

<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'
});

This is working like a charm. But when I try to load a empty new table in I get into all kinds of problems.

Reload code:

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

For some reason the data is kept and jQuery reports an error when it tries to read data in column 2. I haven't been able to find a way to wipe the data.

I have similar tables where this approch works. But they don't have row grouping.

Upvotes: 2

Views: 1079

Answers (1)

Mikkel Nielsen
Mikkel Nielsen

Reputation: 792

Turns out the solution was, so very simple. Can't belive i didnt see this at first...

just added a empty data source to the reload code:

'aaData': []

So the reload code looks like this: 

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

The previous data is now wiped.

Upvotes: 4

Related Questions