Server side processing

From DataTables documentation:

There are times when reading data from the DOM is simply too slow or unwieldy, particularly when dealing with many thousands or millions of data rows. To address this DataTables' server-side processing feature provides a method to let all the "heavy lifting" be done by a database engine on the server-side (they are after all highly optimised for exactly this use case!), and then have that information drawn in the user's web-browser. Consequently, you can display tables consisting of millions of rows with ease.

When using server-side processing, DataTables will make an Ajax request to the server for each draw of the information on the page (i.e. when paging, ordering, searching, etc.). DataTables will send a number of variables to the server to allow it to perform the required processing and then return the data in the format required by DataTables.

Server-side processing is enabled by use of the serverSideDT option, and configured using ajaxDT.

For more information, please check out DataTable's documentation.

 Note

  • This feature is only available with Ajax rendering!
  • By default, angular-datatables set the AjaxDataProp to ''. So you need to provide the AjaxDataProp with either .withDataProp('data') or specifying the option dataSrc in the ajax option.
  • If your server takes a while to process the data, I advise you set the attribute processing to true. This will display a message that warn the user that the table is processing instead of having a "freezing-like" table.

 With your browser debugger, you might notice that this example does not use the server side processing. Indeed, since Github pages are static HTML files, there are no real server to show you a real case study.

angular.module('showcase.serverSideProcessing', ['datatables']) .controller('ServerSideProcessingCtrl', ServerSideProcessingCtrl); function ServerSideProcessingCtrl(DTOptionsBuilder, DTColumnBuilder) { vm.dtOptions = DTOptionsBuilder.newOptions() .withOption('ajax', { // Either you specify the AjaxDataProp here // dataSrc: 'data', url: '/angular-datatables/data/serverSideProcessing', type: 'POST' }) // or here .withDataProp('data') .withOption('processing', true) .withOption('serverSide', true) .withPaginationType('full_numbers'); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() ]; }
{ "draw": 1, "recordsTotal": 57, "recordsFiltered": 57, "data": [ { "DT_RowId": "row_3", "DT_RowData": { "pkey": 3 }, "id": 860, "firstName": "Superman", "lastName": "Yoda" { "DT_RowId": "row_17", "DT_RowData": { "pkey": 17 }, "id": 870, "firstName": "Foo", "lastName": "Whateveryournameis" }, ... ] }