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

Question

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, 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.

$(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)
}

Any help is greatly appreciated.

EDIT: Forgot to include that 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().

Bad Programmer Bad Programmer · Accepted Answer · 2018-11-05T16:47:46

In my code, I was including the draw, length, and start parameters unnecessarily. I did this because I noticed that when I tried to return my data params as a function, these items were not getting passed (the lack of these parameters were causing my database query to fail on the back-end), despite the documentation saying that Datatbles would send them automatically.

This was happening because I was not passing the data object to the function I created.

Here was what I had originally, and the values were not updating; whenever I used table.ajax.reload(), the initial data was still being passed:

ajax: {
    url: myURL,
    data: {
        campus: $campus.val(),
        college: $college.val(),
        year: $term.val()
    }
}

Here is what I tried next, returning the params as a function:

ajax: {
    url: myURL,
    data: { function() {
               return { campus: $campus.val(), college: $college.val(), year: $term.val(),}

}

This is where I noticed that the draw, start, and length params were not being passed. The original question included another variation that I tried, which I'll just put here so that everything is clear.

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

Here is the correct way:

    ajax: {
        url: myURL,
        data: function (d) {
            d.campus = $campus.val();
            d.college = $college.val();
            d.year = $term.val();
        }       
    }

So if you are using server side processing in DataTables, and the data parameters you are sending in your ajax call updates, you do need to return the params as a function so that it updates every time a new ajax call is made with table.ajax.reload() (otherwise, you'll kepe passing the initial data). However, the function should pass DataTables' internal data object, so when the request is made, DataTableswill sent some parameters with the request. Parameters sent are detailed in the documentation here: https://datatables.net/manual/server-side

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

1 Answers