{hero}

ajax.data

Since: DataTables 1.10

Add or modify data submitted to the server upon an Ajax request.

Description

When making an Ajax request to the server, DataTables will construct a data object internally, with the data it requires to be sent to the server for the request. What this data contains will depend upon the processing mode DataTables is operating in:

  • For client-side processing no additional data is submitted to the server
  • For server-side processing (serverSide) the draw request parameters are submitted - see the server-side processing manual.

The ajax.data option provides the ability to add additional data to the request, or to modify the data object being submitted if required.

In principle it operates in exactly the same way as jQuery's $.ajax.data property, in that it can be given as an object with parameters and values to submit, but DataTables extends this by also providing it with the ability to be a function, to allow the data to be re-evaluated upon each Ajax request (see above).

Types

object

Description:

As an object, the ajax.data option is used to extend the data object that DataTables constructs internally to submit to the server. This provides an easy method of adding additional, static, parameters to the data to be sent to the server. For dynamically calculated values, use ajax.data as a function (see below).

function ajax.data( data, settings )

Description:

As a function, the ajax.data option can be used to modify the data DataTables submits to the server upon an Ajax request, by manipulating the original data object DataTables constructs internally, or by replacing it completely.

This provides the ability to submit additional information to the server upon an Ajax request, with the function being executed upon each Ajax request, allowing values to be dynamically calculated. For example, a value could be read from a text input field to act as an additional search option.

Parameters:
Returns:

If there is no return value from the function (i.e. undefined) then the original data object passed into the function by DataTables will be used for the request (the function may have manipulated its values).

If an object is returned, then that object will be used as the data for the request. It will not be merged with the original data object constructed by DataTables before being sent.

If a string is returned, this string it will be used in the Ajax request body rather than individual HTTP parameters being sent. This is particularly useful for sending JSON encoded data in the request body so the server can decode it directly, rather than individual HTTP parameters being sent. See example below for how to use JSON.stringify() to achieve this.

Examples

Add an extra parameter (user_id in this case), of a static value to the data submitted:

new DataTable('#myTable', {
	ajax: {
		url: 'data.json',
		data: {
			user_id: 451
		}
	}
});

Add data to the request by manipulating the data object (no return from the function):

new DataTable('#myTable', {
	ajax: {
		url: 'data.json',
		data: function (d) {
			d.extra_search = $('#extra').val();
		}
	}
});

Add data to the request (returning an object):

new DataTable('#myTable', {
	ajax: {
		url: 'data.json',
		data: function (d) {
			return $.extend({}, d, {
				extra_search: $('#extra').val()
			});
		}
	}
});

Submit data as JSON in the request body:

new DataTable('#myTable', {
	ajax: {
		url: 'data.json',
		contentType: 'application/json',
		type: 'POST',
		data: function (d) {
			return JSON.stringify(d);
		}
	}
});

Related

The following options are directly related and may also be useful in your application development.