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.



Add the following script to your .aspx page.

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!—jQuery Js -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables  JQuery file-->
<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.

Step 3

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

[WebMethod]
        public void HelloWorld()
        {
            List<MyClass> lst = new List<MyClass>();
            int i = 0;
            while (i < 10000)
            {
                lst.Add(new MyClass() { Empid = "1", Name = "Ar"});
                lst.Add(new MyClass() { Empid = "2", Name = "Br" });
                lst.Add(new MyClass() { Empid = "3", Name = "Cr" });
                i = i + 1;
            }
           var mydata=new DataTable()
           {
           aaData=lst,iTotalDisplayRecords=lst.Count,iTotalRecords=lst.Count
           };
            JavaScriptSerializer js=new JavaScriptSerializer();
            js.MaxJsonLength = int.MaxValue;
          Context.Response.Write(js.Serialize(mydata));

     }

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.

public class MyClass
    {
        public string Empid { get; set; }
        public string Name { get; set; }
    }

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

public class DataTable
    {
        public int iTotalRecords { get; set; }
        public int iTotalDisplayRecords { get; set; }
        public List<MyClass> aaData { get; set; }
    }

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

Step4

Design Table from the following code.

<table id="example" class="display" width="100%" cellspacing="0">

    <thead>
        <tr>
            <th >Employee Id</th>
            <th >Name</th>

        </tr>

    </thead>
    </table>

Step 5

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

<script>

    $(document).ready(function ()
    {

example').dataTable({
"bProcessing": true,
"sAjaxSource": "WebService.asmx/HelloWorld",
"sServerMethod": "post",
"aoColumns": [

                   { mData: 'Empid' },
                   { mData: 'Name' },

              ]

                    });
    }
                        );
    </script>

Step 6

Now run your application and see the result..

Remarks

You can download the working project from the given link.

• Link 1
• Link 2