Redraw datatables with search

Question

I am using DataTables. I have added the below code when the page is loading and the table getting all data as expected.

        var table = $('#expensesTable').DataTable({
            responsive: true,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            ajax: {
                url: '/books/daybooks/datatable',
                type: 'POST',
            },
            columns: [
                {data: 'expense_id'},
                {data: 'expense_date'},
                {data: 'expense_description'},
                {data: 'expense_amount'},
                {data: 'vendor_name'},
            ],
       });

Now, I have added a date range picker where it will search data in the server and response will be given back to query via Ajax.

        $('#datepicker').on('apply.daterangepicker', function(ev, picker) {

            var start = picker.startDate.format('YYYY-MM-DD');
            var end = picker.endDate.format('YYYY-MM-DD');

            jQuery.ajax({
                type: "POST",
                url: '/books/daybooks/datatable',
                data: {start : start, end : end},
                success: function(data)
                {
                    console.log(data);
                } // Success End
            }); //AJAX End
          });

Now i am getting all expected filter data as success, but now I need to redraw the table with newly got data after the filter of Ajax call.

if i use $('#expensesTable').DataTable().draw(); then it will do draw without filter,

So i can draw table with filter data?

Thanks in advance.

Normally you can change the request using table.ajax.url('new-url-here').load(), but because you are using a POST request it's a bit different. I have seen posts such as this one that say to set ajax.data using a function, but I haven't tried it myself. — mark_b

andrewjames andrewjames · Accepted Answer · 2021-04-08T14:11:21

Instead of introducing a new ajax call (the jQuery ajax), you can re-use your existing DataTables ajax call when submitting your date range filter data.

To do this, you need to take the following steps:

(1) Update your DataTables ajax option:

ajax: {
  url: '/books/daybooks/datatable',
  type: 'POST',
  data: function () {
    return { "start": start, "end" end };
  }
},

This data function allows you to dynamically assign values to your request. They will be added as standard URL-encoded form data, in the usual way for POST requests.

See here for more information. There are several different ways to use ajax.data. For example, if you were using serverSide processing (which you are not) then the above approach would not work correctly.

(2) To re-use your DataTables ajax call, you can use this:

table.ajax.reload();

See here for more information.

This replaces your jQuery ajax call:

var start;
var end;

$('#datepicker').on('apply.daterangepicker', function(ev, picker) {
  start = picker.startDate.format('YYYY-MM-DD');
  end = picker.endDate.format('YYYY-MM-DD');
  table.ajax.reload(); 
});

When the table first loads (not using reload()), the filter values will be null.

Redraw datatables with search

1 Answers