DataTables – Client-side Processing VS Server-side Processing

Client-Side Processing

Client side processing definition involves handling all the heavy lifting of data manipulation, sorting, filtering, and pagination directly within the user’s web browser. Upon the initial page load, the client-side receives the entire dataset, and the datatables processing spinner position library assumes control, executing all necessary operations locally.

Benefits of client side processing: smooth and responsive user experience, as there is no need to make additional requests to the server during large data or interactions. However, despite the advantages of client side processing. Handling substantial datasets on the client, server side code may lead to performance issues, particularly on devices with limited resources.

Server-Side Processing

Server-Side Processing shifts the burden of data manipulation and processing from the client to the the server side processing mode. With examples of server side processing, Datatables sends requests to the server for specific data subsets based on user interactions. Such as sorting, filtering, or paginating. The server processes these requests and returns only the relevant data. It reduces the data transferred to the client.

There are various benefits of server side processing. Handling large datasets alleviating client-side performance concerns. However, it can lead to slightly slower response times, especially when working with remote servers.

Why do we use DataTables instead of simple Html tables?

DataTables is a powerful jQuery plugin for creating table listings and adding interactions between columns. It provides searching, column sorting, and pagination without any configuration, whereas simple HTML tables collect HTML tags and do not give 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 of 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 address this issue, DataTables offers a server-side processing feature. This feature involves having a database engine on the server-side handle the processing of large amounts of data. As a result, the table can quickly display records comprising millions of rows in the web browser.

Server-Side Processing:

Whenever a class of 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.

Why server side rendering over client side server side script rendering? Because when DataTables requests the json 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 ajaxoptions 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.

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 can keep the information on the server side and not deliver it to the client, even if you pull from relational databases or NoSQL stores.
• There is still a lot of incompatibility across browsers regarding JavaScript support, especially when older browsers like Microsoft’s Internet Explorer are necessary. You can drastically decrease browser interoperability difficulties because server-side rendering eliminates the requirement for many client-side JavaScript modules.