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">
  4. <!—jQuery Js -->
  5. <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  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));
  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">
  3. <thead>
  4. <tr>
  5. <th >Employee Id</th>
  6. <th >Name</th>
  8. </tr>
  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>
  3. $(document).ready(function ()
  4. {
  6. example').dataTable({
  7. "bProcessing": true,
  8. "sAjaxSource": "WebService.asmx/HelloWorld",
  9. "sServerMethod": "post",
  10. "aoColumns": [
  12. { mData: 'Empid' },
  13. { mData: 'Name' },
  15. ]
  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.