datatables Server Side Data Processing DataTables 1.10+ Serverside Processing

Example

Example Table

There are several ways to inject your data into DataTables. Serverside Processing is just one method. In this manner, DataTables has a pre-configured endpoint to retrieve data from, and that endpoint is responsible for accepting all paging/filtering/sorting requests that DataTables applies. There are a variety of pros and cons to this versus sending your complete dataset back from the server and letting DataTables do it all client-side depending on your use case.

var tbl = $('#example').DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    url: '/echo/json/',
    method: 'post'
  },
  columns: [{
    data: 'First',
    title: 'First Name'
  }, {
    data: 'Last',
    title: 'Last Name'
  }]
});

Example of hooking preXhr event to send additional data to ajax request

This event fires directly before the ajax call is made allowing you to modify the request body. This is useful if there is a form that influences the data returned to the table (envision maybe a min/max bar to filter within a date range or similar).

tbl.on('preXhr.dt', function(ev, settings, data) {
    $.extend(data, {
      min: $('form [name=min]').val(), 
      max: $('form [name=max]').val()
    });
});

Explanation of server side requirements for processing request

In a typical no-option instance of DataTables, all filtering, sorting, and paging is handled in the client browser. With Serverside Processing enabled, these tasks are shifted to the webserver. For very large datasets which may be inefficient to send in their entirety to the client, this can help.

There are several default parameters which are sent by the Datatables request when you configure an ajax endpoint. It can get very long, so rather than itemizing each, a general overview of the server responsibilities may be more helpful.

Starting with any optional parameters you may have supplied to the request, compile your dataset and prepare it for DataTables operations. Use the search[value] and search[regex] parameters to apply any filtering across all columns/properties. There are also columns[i][search][value] and columns[i][search][regex] parameters for individual column filters, though these are not commonly used in simple instances of DataTables.

Sort your filtered data using the various order parameters. As with the search parameters, there will be a set of ordering parameters per column on which sorting is enabled. order[i][column] and order[i][column][dir]

Once filtering and sorting is complete, it's time to page the data based on the DataTables request using the start and length parameters. In .NET this could look like:

int start = Int32.TryParse(Request["start"]);
int length = Int32.TryParse(Request["length"]); 
return MyData.Skip(start).Take(length);

Example Response

This is the rough response structure DataTables expects. Whatever your data is (2d array, array of objects, etc) is nested in the data property with the other properties seeding DataTable's core to draw information about paging and filtering (e.g. "Showing records 11-20 of 500 (filtered from 1000)")

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [/*your data goes here*/]
}

Also see .rows.add(data) and the data option for alternate methods of setting the contents of your DataTable using JSON data. Of course DataTables can also be initialized from static HTML or HTML5 data- attributes