DataTables example - Custom HTTP variables

It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the ajax option's data parameter which can be used in one of two different ways:

  • object - An object data to send to the server. This is useful for adding static data to the request.
  • function - A function which will manipulate the data object to send to the server, adding values as required. Using the data parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.

The example below shows server-side processing being used with an extra parameter being sent to the server by using the ajax.data option as a function.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').dataTable( { "processing": true, "serverSide": true, "ajax": { "url": "scripts/server_processing.php", "data": function ( d ) { d.myKey = "myValue"; // d.custom = $('#myInput').val(); // etc } } } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.