ajax.reload() and .clear() Not Working

sjmcarter

I have a tab section created with bootstrap 3. For one of the tabs, the tab content is a datatable. The data is generated server side and works fine on initial load. However, I am trying to use ajax.reload() inside of an onchange function, and the data is not refreshing. I also tried using the clear() method, but the data doesn't get cleared. I have verified that the function is firing and that the AJAX response being returned is valid JSON and not empty. There are no errors in my console, just nothing happens.

I am using using Datatables 1.10 and the source is directly from a cdn (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js).

I have searched StackOverflow and the Datatbles forum for this problem. other people have had it, and the accepted solution seems to be $('#TableID').DataTable().ajax.reload(), which I am doing. I have also tried storing the datatables into var table and trying table.ajax.reload(), and also passing in a callback function and explicitly setting page refresh to true. I get logging back from the callback function, and no errors still, yet no change.

HTML:

<div id="tab_datatable" class="tab-pane fade">          
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Year</th>
                <th>Course</th>
                <th>Title</th>
                <th>Enrollment</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

My js code creating the table on the initial load, which works fine:

$( document ).ready(function() {
    var $table = $('#example').DataTable({
    scrollCollapse: false,
    paging: true,
    pagingType: 'simple_numbers',
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
    processing: true,
    serverSide: true,
    ajax: {
        url: myURL,
        data: {
            campus: $campus.val(),
            college: $college.val(),
            year: $term.val(),
            draw: parseInt(1),
            length: (10),
            start: parseInt(1)
        }
    },
    searching: false,
    info: false,

});
});

The table renders properly in the "example" div.

I have an updatePage() function that fires when one of the three menus options on the page changes. I see the console log message from the test() function below. I am also monitoring the network calls in my console and when one of the menu values changes I do see that a new AJAX call is triggered and the correct data is being returned. So the problem really just seems to be that the table is not rendering properly after ajax.reload().

$(document).on('change', '.dynamic', function(){
    updatePage();
});

//Updates dynamic content on page
function updatePage()
{       
    //sessionStorage
    sesssionStateStorage('campus', $campus.val());
    sesssionStateStorage('college', $college.val());
    sesssionStateStorage('term', $term.val());

    console.log($term.val()); //confirming that value is updating

    //Refresh datatable
    console.log($table);  //Shows table object so I know it exists

   //$table.clear();   //This does't work;  no errors but no change
   //$table.ajax.reload() //doesn't work; no errors but no change
   //$('#example').DataTable().ajax.reload();  //doesn't work; no errors but no change
    $('#example').DataTable().ajax.reload(test(), true);  //Confirming that I see test logging from test() function, but data still doesn't update

}

function test()
{
   console.log('in test');
   console.log('table object: ' + $table)
}

kthorngren

When using clear() you also need to use draw() as shown in the clear() example.

The only thing I can see that might be a problem is with the draw parameter of your ajax.data option:

    ajax: {
        url: myURL,
        data: {
            campus: $campus.val(),
            college: $college.val(),
            year: $term.val(),
            draw: parseInt(1),  //always setting to 1
            length: (10),
            start: parseInt(1)
        }
    },

This is used as a sequence number by Datatables. I believe the first request Datatables will send a draw parameter of 1. The next draw it will send 2. Looks like with ajax.reload() the draw parameter is incremented. You can see this behavior in this example:
http://live.datatables.net/huqegeli/1/edit

You are hard coding the draw parameter sent to 1. I suspect the response after the ajax.reload() is 1 but Datatables is expecting 2 or whatever draw sequence it is at. The expected sequence is less than the response so Datatables doesn't update the table.

Try removing this parameter from your ajax.data option.

Kevin

sjmcarter

Thanks. I accidentally clicked to accept answer. Not saying it's wrong--I'm in the middle of testing. I'll update this tomorrow after I have poked around a little more. I appreciate the help!