Where is "d" in ajax.data in datatable come from?

Question

I am working with datatable and I want to perform ajax ajax call for each time page change. But I still wonder where is "d" in ajax.data is coming from and how to modify it after each time ajax call Here is the example in the datatable document

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

Answer 1

Short Answer:

The d represents any pre-existing data to be sent to the server as part of the DataTables Ajax request.

Your data is appended to that data.

Two examples of such "pre-existing data" are:

1. The timestamp generated by jQuery when cacheing is set to false.

2. The request data created by DataTables when it is using server-side processing.

See below for more about these.

By using the data option as a function, you can send data dynamically to the server, where the data values can be different for each DataTables Ajax request. If you simply used the data: { "user_id": 451 } hard-coded approach (or even a variable), you would not be able to do that.

The d allows you to preserve any pre-existing data, when you add your additional data to the request.

More Details and Examples:

First example:

This sends a basic GET request to a publicly available JSON service. There is no explicit data option here:

$(document).ready(function() {

  var table = $('#example').DataTable( {
    ajax: {
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/posts",
      dataSrc: ""
    },
    "columns": [
      { "title": "User ID", "data": "userId" },
      { "title": "ID", "data": "id" },
      { "title": "Title", "data": "title" }
    ]
            
  } );

} );

If you use a GET with the jQuery setting cache: false (which is the default), then jQuery will cause a timestamp parameter to be added to the request:

...appending "_={timestamp}" to the GET parameters...

So, in my example above this would be something like:

    https://jsonplaceholder.typicode.com/posts?_=1629810701730

You can also provide your own hard-coded request data:

ajax: {
  method: "GET",
  url: "https://jsonplaceholder.typicode.com/posts",
  dataSrc: "",
  data: { "user_id": 451 }
}

And now the request URL will look like this:

https://jsonplaceholder.typicode.com/posts?user_id=451&_=1629810932716

But this value of user_id=451 is hard-coded into the DataTable definition when the DataTable is initialized and cannot be changed dynamically later on.

By using a function for data (instead of a hard-coded value) you can provide user_id values which may be different every time the Ajax request is submitted:

ajax: {
  method: "GET",
  url: "https://jsonplaceholder.typicode.com/posts",
  dataSrc: "",
  "data": function ( d ) {
    d.user_id = $('#selected_user_id').val();
  }
}

In the above example, the d represents any pre-existing data to be submitted to the server - for example, that _=1629810701730.

Server-Side Processing:

The other important "pre-existing data" example is when you are using server-side processing. In this mode, DataTables automatically generates a data structure as described here in the "Sent Parameters" section.

That data is required by the server so that the server can construct the correct "next page" of results to display to the user.

If you did not append your extra (optional) data to that pre-existing (required) data, it would be overwritten by your data.

"How to modify it...?"

Regarding your question about modifying the d data: Typically you don't want to modify the pre-existing data - you just want to append your custom data to it (or update your previously appended custom data):

"data": function ( d ) {
  d.user_id = $('#selected_user_id').val();
}

In the above example, the user_id parameter is derived from the current value of the element with the ID of selected_user_id. You can, of course, use whatever logic you wish here to build whatever complex data structure you need to send to the server.

This data structure is added to whatever d already contains: d.user_id

Final note: If there is no pre-existing data (for example, if you are using POST not GET, where there is no underscore timestamp) then you are adding your data to an empty object.