Reload DataTable content with jQuery ajax call

Question

I have a DataTable and I want to filter it's content depending on what user selects in form. Here is the sample of code I use:

$(document).on('click', '#filter_btn', filterList)

function filterList (event) {

  event.preventDefault()

  var form_data = $('.filter-form').serialize()
  var url = window.location.origin + '/my-amazing-url/'

  $('#dataTable-x').DataTable({
    ajax: {
       url: url,
       type: 'get',
       dataType: 'json',
       data: form_data
    }
  })

  $('#dataTable-x').DataTable().ajax.reload()

}

On server side Django returns following:

...
data = self.get_queryset().values()
    return JsonResponse(data)
...

Yet nothing is changed. How should I modify the code? Thanks.

try using the draw(), https://datatables.net/reference/api/draw() — ian, Jan 26 '21 at 00:28
Share full code, how did you define your data table. And why try you to redefine it? Is your url static? — NKSM, Jan 26 '21 at 00:49
https://stackoverflow.com/questions/46912870/datatable-load-with-default-filter-value/46913163 — bassxzero, Jan 26 '21 at 01:07

andrewJames · Answer 1 · 2021-01-26T15:06:05.497

Here is how I would structure this:

Assumptions:

You have a form: <form id="filter-form">..</form>. Here I am using an ID for the form, rather than a class name.
Inside my "document ready" script, I have the following:

var form_data;

$( "#filter-form" ).submit(function( event ) {
  event.preventDefault();
  form_data = $( this ).serializeArray(); 
  table.ajax.reload();
});

Note the reference to the form ID using #. I prefer this to using a css class name.

The above script takes care of capturing the form data, and then re-running the DataTables ajax call, using table.ajax.reload().

For the table itself, I use a function for the ajax data:

var table = $('#example').DataTable( {
  ajax: { 
    method: "POST", // or GET if you prefer
    url: your URL here!
    data: function() { 
      return form_data 
    }
  },
  // the rest of your table options here
  });

Points to note:

The table is named var table = ... - so that the table can be used by the first fragment I showed: table.ajax.reload().

The data option is a function. This is specific to DataTables (it's not part of the underlying jQuery ajax syntax). More about this is here in the official DataTables documentation.

Assuming you handle the POST form data (or GET query parameters) correctly on the server, this should work.

Louys Patrice Bessette · Answer 2 · 2021-01-26T01:56:22.950

DataTables can have it's ajax source, where only an URL is needed. Documentation - Ajax source.

OR

You can use you own form to select some select data to provide to DataTables.

And in this case, it you would have to provide the new data to DataTables form the ajax success callback. Half of this answer comes this other answer.

$(document).on('click', '#filter_btn', filterList)

function filterList (event) {

  event.preventDefault()

  var form_data = $('.filter-form').serialize()
  var url = window.location.origin + '/my-amazing-url/'

  $.ajax: {
      url: url,
      type: 'get',
      dataType: 'json',
      data: form_data,
      success: function(response){

        // From the "other answer"

        $('#dataTable-x').clear().draw();
        $('#dataTable-x').rows.add({data:response.data}); // Where response.data is an array
        datatable.columns.adjust().draw();
      }
    }
  })
}

Reload DataTable content with jQuery ajax call

2 Answers2