jQuery Datatables | Reloading data after filter values are changed

Suppose there are two filters on the screen:

Date from
Date to

We need to reload data of Jquery datatable based on changed filter values.
“ Datatable “ plugin for jQuery needs to be called by including AJAX call as shown below :

Suppose id of the button on which we have to apply the filters is “showRecord”.

Click function needs to be called using jQuery :

$("#showRecord").click(function()
{
table.AJAX.reload();
});

Here’s the rest of the code for table update:

var table = $('#example').DataTable(
{
"language":
{
"loadingRecords": "Please wait - loading... "
},
"AJAX":
{
"url": "strutsActionName.action",
"data":function (data)
{
data.fromDate=$(":text[name='date_From']").val();
data.toDate=$(":text[name='date_To']").val();
},
cache : false
},

"type": "POST",
"processing": true,
"serverSide": false,
"columns":
[
{
"data": "columnName"
},
{
"data": "columnName"
},
],
filter:true,
info:true,
"searchable" :true,
"ordering" :true,
paging :true ,
scrollX:true,
"scrollY": "500px",
"scrollCollapse": true,
"dom": '<"top"if>t<"bottom"rlp><"clear">'
});

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com