DataTables ajax.reload() with parameters

datatables ajax reload with new data
reload datatable without ajax
jquery datatable reload on button click
refresh datatable on ajax success
datatable ajax reload not working
jquery ajax refresh table on success
datatable refresh button
refresh datatable without refreshing page

I am using DataTables serverSide in an Angular2 project.

I am trying to reload the table after making changes, and those changes I want to pass them as parameters in POST via AJAX.

The thing is that DataTables is always getting the options object from the initialization, and not an updated version with the new parameters.

So, what I need is, to use ajax.reload() passing a new set of parameters.

This is my current function:

filterData(tableParams) {
    console.log('reloading DT. tableparams received are: ' + JSON.stringify(tableParams));

    let element = $(this.el.nativeElement.children[0]);
    let table = element.find('table.dataTable');

At the moment, as you can see, I'm not using tableParams, this is because I wanted to show a clean version of my function, I tried many things and none of them worked.

DataTables always gets the initial options object, with the initial parameters.

This is one of my desperate attempts:

filterData(tableParams) {
    let element = $(this.el.nativeElement.children[0]);
    let table = element.find('table.dataTable');
        ajax: {
            url: this.jsonApiService.buildURL('/test_getUsers.php'),
            type: 'POST',
            data: tableParams,

Some help would be much appreciated. If you need further explanations on how the DataTable is created, or more code snippets let me know. But I think that the issue is just with the ajax.reload() function, being able to send updated parameters will solve the issue.

Thanks very much!

Edit 1

This is my init options object:

            let data = {
                email: true,
                test: 'init',

            this.options = {
                dom: 'Bfrtip',
                processing: true,
                serverSide: true,
                pageLength: 20,
                searchDelay: 1200,
                ajax: {
                    url: this.jsonApiService.buildURL('/test_getUsers.php'),
                    type: 'POST',
                    data: data,
                columns: [
                    {data: 'userId'},
                    {data: 'userCode'},
                    {data: 'userName'},
                    {data: 'userRole'},
                    {data: 'userEmail'},

And these are the parameters that DataTables is sending:

(Among other DataTables parameters)

When I call ajax.reload(), no matter the things I have tried, I end up sending these same parameters, therefore, sending the init parameters.

I finally got the solution, the problem was that I was too focused on achieving my goal through DataTable().ajax.reload(). I wanted to pass the parameters through there in one way or another, and that was incorrect.

I had to change the construction of the options object. As you saw earlier, I was assigning my custom parameters to the options object like this:

ajax: {
  url: this.jsonApiService.buildURL('/test_getUsers.php'),
  type: 'POST',
  data: this.params,

Where data: this.params would get the data from somewhere, in my case, I had 2 listeners, one for init and another for updating that change this.params value. This, instead of a listener could be an onChange(), but the point is that the parameters change at runtime.

So I simply had to put this into a function, and merge DataTable's parameters to my own parameters.

This is my solution:

data: function (d) {
    Object.assign(d, myClass.params);
    return d;

With this options object, when I have to refresh the DataTable sending new parameters to the server, I simply call ajax.reload(). DataTables will get the options object with the latest data and reload itself.

I really hope this can help someone! Good work and happy coding!

Reload ajax with parameters, The goal is to refresh datatable automatically. Here is my code: var table = $('#​tableRapport').DataTable({ "ajax": { "url": $('#urlRecherche').text()  Reload the table data from the Ajax data source. Description. In an environment where the data shown in the table can be updated at the server-side, it is often useful to be able to reload the table, showing the latest data.

In some cases you may want to change ajax url at runtime or apply any additional query parameters.

So you can do like this:

var dataTable = $('#example').DataTable({...});    

It works with version v1.10.16 of the library.

DataTables ajax.reload() with parameters, I finally got the solution, the problem was that I was too focused on achieving my goal through DataTable().ajax.reload() . I wanted to pass the  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more datatables ajax reload not updating parameters passed

  "ajax": {
    "url": "data.json",
    "data": function (d) {
        d.extra_search = $('#extra').val();

then simply call:


Reload Ajax request with new parameters, And I need to change data parameter in AJAX request and refresh the table. I am refreshing table with command $('#table1').DataTable()  mytable.ajax.reload(); It works fine, but now I'd like to send a few parameters in that request. Those parameters I only need on reload, and not in the initialization of the table.

How can I use ajax.reload with jQuery datatable, I was told I should use ajax.reload() with this in case someone has to parameter is resetPaging, if is true will reset the datatable to default, if is  The data object stored is the resulting object once the option has been fully evaluated, so any custom parameters are also stored. This object is considered to be read-only, as writing values to it will have no impact upon any DataTables operation - it is provided solely for the use of the API.

DataTables.js → How to update your data object for AJAX JSON , example_table.ajax.reload(). As you can see, you simply can see any property of the parameter “d” and set a value. DataTables will then set the  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)., – Update Ajax Interval, Reload Data, Refresh Table dataTable() which you are using and returns a jQuery object and the old The function is given a single parameter – the JSON data returned by the server,  $(document).ready(function() { $('#table_id').DataTable( { stateSave: true } ); }); Anyone who are using jQuery DataTables and wants to perform tasks e.g. reload the page, or edit, delete, will face a problem to lose the current page and navigate to 1st page, this snippet will help him to stay on the same page, It avoids to return from current page to first page.