Server-side processing

When working with large data sets (50'000 rows+), you might find that you want to harness the power of the SQL database on your server, having it perform ordering, searching and paging for you - tasks which database engines are highly tuned for. With a large amount of data on the client-side, the browser can start to slow down, so DataTables has a server-side processing mode which hands off all of the "hard work" to the server. This allows DataTables to display data from results sets which may be many millions of records in size.

The Editor server-side libraries (both PHP, .NET and NodeJS) have automatic detection of a server-side processing request from DataTables and will automatically process them as required. Thus, to switch your table to server-side processing mode, all you need to do is use the DataTables serverSide option, setting it to true. You will likely also want to use POST data, which can be done using the ajax option, as shown in this example. The Editor libraries will then perform all additional logic for you automatically!

Search:

First name	Last name	Position	Office	Start date	Salary
Airi	Satou	Accountant	Tokyo	2008-11-28	$162,700
Angelica	Ramos	Chief Executive Officer (CEO)	London	2009-10-09	$1,200,000
Ashton	Cox	Junior Technical Author	San Francisco	2009-01-12	$86,000
Bradley	Greer	Software Engineer	London	2012-10-13	$132,000
Brenden	Wagner	Software Engineer	San Francisco	2011-06-07	$206,850
Brielle	Williamson	Integration Specialist	New York	2012-12-02	$372,000
Bruno	Nash	Software Engineer	London	2011-05-03	$163,500
Caesar	Vance	Pre-Sales Support	New York	2011-12-12	$106,450
Cara	Stevens	Sales Assistant	New York	2011-12-06	$145,600
Cedric	Kelly	Senior Javascript Developer	Edinburgh	2012-03-29	$433,060
First name	Last name	Position	Office	Start date	Salary

Showing 1 to 10 of 57 entries

Previous1 2 3 4 5 6Next

Javascript
HTML
CSS
Server script
Comments (0)
Ajax load
Ajax data

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

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/staff.php",
        "table": "#example",
        "fields": [ {
                "label": "First name:",
                "name": "first_name"
            }, {
                "label": "Last name:",
                "name": "last_name"
            }, {
                "label": "Position:",
                "name": "position"
            }, {
                "label": "Office:",
                "name": "office"
            }, {
                "label": "Extension:",
                "name": "extn"
            }, {
                "label": "Start date:",
                "name": "start_date",
                "type": "datetime"
            }, {
                "label": "Salary:",
                "name": "salary"
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "../php/staff.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

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

Editor submits and retrieves information by Ajax requests. The two blocks below show the data that Editor submits and receives, to and from the server. This is updated live as you interact with Editor so you can see what is submitted.

Submitted data:

The following shows the data that has been submitted to the server when a request is made to add, edit or delete data from the table.

1	`// No data yet submitted`

Server response:

The following shows the data that has been returned by the server in response to the data submitted on the left and is then acted upon.

1	`// No data yet received`

Server-side processing

Post new comment

Submitted data:

Server response:

Other examples

Simple initialisation

Advanced initialisation

DataTables as an input

Dates and time

DataTables extensions

Inline editing

Bubble editing

API

Standalone

Styling

Plug-ins

DataTables