How To Use ServerSide Processing With jQuery Datatable

What is the benefits of using  ServerSide Processing with JQuery Datatable?.

I personally found two important benefits of using ServerSide Processing with Datatable.

  1. We can handle more data using JQuery Datatable.
  2. Data can load quickly from the Database server .

Follow the following steps to use ServerSide processing with Datatable.

Step 1

Add JQuery  Js file  ,and Jquery Datatable css and Js file as shown in the below figure.

jQuery

Add the following script to your .aspx page.

  1. <!-- DataTables CSS -->  
  2. <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">  
  3.    
  4. <!—jQuery Js -->  
  5. <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>  
  6.    
  7. <!-- DataTables  JQuery file-->  
  8. <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>  

Step 2

Create one WebService to Getdata (Here I am using asp.net WebService to get data). You can see  my Solution Explorer . I have two web pages and one service, and the name of the service is webService.asmx.

jQuery

Step 3

Create method inside service which will return data to bind Jquery Datatable.

  1. [WebMethod]  
  2.         public void HelloWorld()  
  3.         {  
  4.             List<MyClass> lst = new List<MyClass>();  
  5.             int i = 0;  
  6.             while (i < 10000)  
  7.             {  
  8.                 lst.Add(new MyClass() { Empid = "1", Name = "Ar"});  
  9.                 lst.Add(new MyClass() { Empid = "2", Name = "Br" });  
  10.                 lst.Add(new MyClass() { Empid = "3", Name = "Cr" });  
  11.                 i = i + 1;  
  12.             }  
  13.            var mydata=new DataTable()  
  14.            {  
  15.            aaData=lst,iTotalDisplayRecords=lst.Count,iTotalRecords=lst.Count  
  16.            };  
  17.             JavaScriptSerializer js=new JavaScriptSerializer();  
  18.             js.MaxJsonLength = int.MaxValue;  
  19.           Context.Response.Write(js.Serialize(mydata));  
  20.           
  21.      }  

In the above code you can see that I have defined one function named HelloWorld. editsInside the HelloWorld function I have used three classes.These three classes are MyClass, DataTable and JavaScriptSerializer. Now defined the MyClass inside the service class as I have defined below.

  1. public class MyClass  
  2.     {  
  3.         public string Empid { get; set; }  
  4.         public string Name { get; set; }  
  5.     }  

Now define the second class DataTable as I have defined below.

  1. public class DataTable  
  2.     {  
  3.         public int iTotalRecords { get; set; }  
  4.         public int iTotalDisplayRecords { get; set; }  
  5.         public List<MyClass> aaData { get; set; }  
  6.     }  

JavaScriptSerializer class is  available inside System.Web.Script.Serialization namespace.Add this namespace to your service class.

Step4

Design Table from the following code.

  1. <table id="example" class="display" width="100%" cellspacing="0">  
  2.       
  3.     <thead>  
  4.         <tr>  
  5.             <th >Employee Id</th>  
  6.             <th >Name</th>  
  7.               
  8.         </tr>  
  9.          
  10.     </thead>  
  11.     </table>  

Step 5

Now use Ajax to call Service method and bind data to Jquery Datatable as shown in the below code.

  1. <script>  
  2.    
  3.     $(document).ready(function ()  
  4.     {  
  5.   
  6. example').dataTable({  
  7. "bProcessing"true,  
  8. "sAjaxSource""WebService.asmx/HelloWorld",  
  9. "sServerMethod""post",  
  10. "aoColumns": [  
  11.   
  12.                    { mData: 'Empid' },  
  13.                    { mData: 'Name' },   
  14.                 
  15.               ]  
  16.   
  17.                     });     
  18.     }  
  19.                         );  
  20.     </script>  

Step 6

Now run your application and see the result..

jQuery

Remarks

You can download the working project from the given link.