Send additional Post parameters without ajax.data in Jquery Datatable

|
| By Webner

Send additional Post parameters without ajax.data in Jquery Datatable in server side processing

As we know, when we perform any actions on datatable (like sort the datatable, search data from the datatable) then server receives the ajax request for each action. The table is redrawn to display the changes on every action. We can set “serverSide” property equals to true if we want to use server-side processing. By default DataTable will send the following post parameters with each ajax request:

[{ draw,  start, length, search[value] , search[regex], order[i][column] , order[i][dir] ,columns[i][data], columns[i][name] ,columns[i][searchable], [search], [regex]  }]

Now if we want to send extra parameters with ajax request we will have to trigger “preXhr” event.

In the following example we have one datatable with custom filter (dropdown list). Now, we want to send new post variable which will contain Dropdownlist value when we select any new value from Dropdown filter.

For example:

Step 1: Firstly we initialize datatable for displaying User’s data :

var table = $(“#<datatable-id>).DataTable({
processing: true,
serverSide: true,
ajax:{
url: <url>,
type:'POST',
data:{<post-variable-name> : <value>},
},
});

Step 2: Now we are creating one custom filter (Dropdownlist ) for user’s status (active,expired). Based on this filter value we are showing users i.e. if value is expired, we are showing expired users and if value is active, we are showing those users whose status is active in database.

<select id="filterUserByStatus"class="form-control">
<option value='active' selected = "selected"><?= __('Active')?></option>
<option value='expired'><?= __('Expired')?></option>
</select>

When we select new value from dropdownlist, on a dropdownlist change event we are redrawing the table to get the filtered users.

$('#filterUserByStatus').on( 'change', function () { 
table.draw();
});

At that time, we want to send dropdownlist value with ajax request.

Step 3: For the initial datatable call, we can do this by adding data to the ajax:

$(“#<datatable-id>).DataTable({
….
ajax:{
….
data:{"user_status":$('#filterUserByStatus').val()},
}
});

But, when we select the new value from dropdownlist and draw the table on dropdownlist change event then new selected value of dropdownlist is not sent in “user_status” post variable.

Step 4: For sending newly selected value on each draw of the table we can send dropdownlist value by using “preXhr” event.This event is called before DataTable has processed the new data from the server, so the returned data would not have been drawn on page when this event fires.The following lines show how to use this event:

 $('#filterUserByStatus').on( 'change', function () {
table.on('preXhr.dt', function ( e, settings, data ) {
data.user_status = $(this).val();
} );
table.draw();
} );

Leave a Reply

Your email address will not be published. Required fields are marked *