DataTables – Client-side Processing VS Server-side Processing

Why do we use DataTables instead of simple Html tables?

DataTables is a powerful jQuery plugin for creating table listings and adding interactions to them. It provides searching, sorting, and pagination without any configuration where simple Html tables collection of Html tags and not giving any advanced features like DataTables.

How to use DataTables using the jquery plugin?

Client-Side Processing:

Step: 1
Create an Html page and add the following links.

Jquery CDN link:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

DataTables CDN links:

CSS:

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">

Js:

<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

Step: 2

Create a table on your Html page. Add only one line to your script to convert your simple Html table to DataTables which gives you the functionality of searching, sorting, and pagination by default.

<script>
  $(document).ready( function () {
    $('#table_ID').DataTable();
  });
</script>

Here, we learn about client-side processing DataTables but many times when reading data from the DOM is too slow or unwieldy, especially when we are dealing with many thousands or millions of data. To solve this problem, DataTables provides a server-side processing feature for all the large amounts of data to be done by a database engine on the server-side, and then have that information display table records consisting of millions of rows in the web browser easily.

Server-Side Processing:

Whenever DataTables requests information from the server (i.e. paging, ordering, searching, etc. ), an AJAX request is made to the server. Several variables will be sent to the server for it to perform the required processing and to allow DataTables to do so.

By using the serverSide option, you can enable server-side processing and configure it using ajax.

When DataTables requests data from the server, with the above parameters, it expects to receive JSON data back with the following parameters:

• Draw: DataTables uses this counter to ensure that the Ajax results from server-side processing requests are drawn in sequence
• Records total : number of records in the database, before filtering,
• Records filtered: Number of records in the database, after filtering
• Data: Each row will consist of one data source object, which is used by DataTables. Note that the data source object’s name can be changed by using the ajax option’s data-src property.
• Error: During server-side processing, if an error occurs, you can inform the user using this parameter that it was encountered. Do not include this parameter if there was no error.

Example of DataTables Processing :

$(document).ready(function() {

  var table = $("#table_ID").DataTable({
    "processing" : true,
    "serverSide": true,
    "serverMethod": 'POST',
    'ajax': {
      'url': '/api',
      data: function (data) {
      },
      error: function (error) {
        console.log(error);
      }
    }
    ,
   "columns": [{
      data: null,
        "render": function (data) { return data.userId; }
      },
      {
        data: null,
        "render": function (data) { return data.id; }
      },
      {
        data: null,
        "render": function (data) { return data.title; }
      },
     {
       data: null,
       "render": function (data) { return data.body; }
      }],
      "fnRowCallback": function(nRow, aData, iDisplayIndex) {
         if(aData.id == 2) {
           $(nRow).css('background-color', '#16aa1633');
          }
      }
   });
});

Where, fnDrawCallback. Show details. This function is called on each drawing event and allows you to change any aspect of the DOM as you wish.

Why is Server-side processing better than Client-side processing?

• Server-side rendering is better for SEO than client-side rendering, as it can speed up the loading time of your page, improving user experience and helping your site rank higher in Google search results.
• Using server-side rendering here has the benefit of keeping the information on the server-side and not delivering it to the client, even if you pull from relational databases or NoSQL stores.
• There is still a lot of incompatibility across browsers when it comes to JavaScript support, especially when older browsers like Microsoft’s Internet Explorer are necessary. Because server-side rendering eliminates the requirement for a large number of client-side JavaScript modules, you can drastically decrease browser interoperability difficulties.