JQuery DataTable Client Side Processing

In this blog I am going to share with you how to use Jquery DataTable with Jquery Ajax .

Why should we use JQuery Datatable?

JQuery Datatable is very light weight and gives some inbuilt functionalities like searching  and sorting .

In order to implement the JQuery Datatable follow these steps

Step 1

Add JQuery script and JQuery Datatable css and Js script inside the head section . Below I have given all those scripts.

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

Step 2

Design the html table. In the below code as you can see I have assigned id to table and its body. Before moving to the next step please be sure that your table is in the proper format.

  1. <table id="userTable">  
  2.     <thead>  
  3.         <tr>  
  4.             <th> User Name </th>  
  5.             <th>Email Id</th>  
  6.             <th> Address </th>  
  7.             <th>Mobile Number</th>  
  8.         </tr>  
  9.     </thead>  
  10.     <tbody id="tBody"> </tbody>  
  11. </table>  

Step 3

Go to code behind of the page to create a function which will return the data to bind the Table.

I have created a class UserList with four auto implemented properties as you can see in the below code.

  1. public class UserList {  
  2.     public string UserName {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public string EmailId {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     public string Address {  
  11.         get;  
  12.         set;  
  13.     }  
  14.     public string MobileNumber {  
  15.         get;  
  16.         set;  
  17.     }  
  18. }  

Step 4

Now create the method which will return the value to bind the table, as you can see in the below code.

Remarks: Please focus on these points while creating the method.

  1. Method should be static because I have to call this method from Jquery Ajax.
  2. Method should be public type.
  3. Method should be a WebMethod( Available inside System.Web.Services NameSpace).
  4. In this case return type is List<UserList>.
    1. [WebMethod]  
    2. public static List < UserList > ReturnUserList() {  
    3.     List < UserList > userList = new List < UserList > ();  
    4.     userList.Add(new UserList() {  
    5.         UserName = "Amit", EmailId = "amit@gmail.com", Address = "Delhi", MobileNumber = "+9197"  
    6.     });  
    7.     userList.Add(new UserList() {  
    8.         UserName = "Amit", EmailId = "Amit@gmail.com", Address = "Patna", MobileNumber = "+91975"  
    9.     });  
    10.     userList.Add(new UserList() {  
    11.         UserName = "Abhi", EmailId = "Abhi@gmail.com", Address = "Allahabad", MobileNumber = "+91967"  
    12.     });  
    13.     userList.Add(new UserList() {  
    14.         UserName = "Ankit", EmailId = "Ankit@gmail.com", Address = "Bhagalpur", MobileNumber = "+91697"  
    15.     });  
    16.     userList.Add(new UserList() {  
    17.         UserName = "Denesh", EmailId = "Denesh@gmail.com", Address = "Patna", MobileNumber = "+91937"  
    18.     });  
    19.     userList.Add(new UserList() {  
    20.         UserName = "Rahul", EmailId = "amit@gmail.com", Address = "New Delhi", MobileNumber = "+9197"  
    21.     });  
    22.     return userList;  
    23. }

Step 5

Now call the webmethod ReturnUserList from JQuery Ajax. Write code inside the head section of .aspx page.

  1. <script>  
  2.     $(document).ready(function() {  
  3.         $.ajax({  
  4.             type: "POST",  
  5.             url: "WebForm.aspx/ReturnUserList",  
  6.             dataType: "json",  
  7.             contentType: "application/json",  
  8.             success: function(response) {  
  9.                 $.each(response.d, function(index, value) {  
  10.                     var tr = "<tr>";  
  11.                     tr += "<td>" + value.UserName + "</td>";  
  12.                     tr += "<td>" + value.EmailId + "</td>";  
  13.                     tr += "<td>" + value.Address + "</td>";  
  14.                     tr += "<td>" + value.MobileNumber + "</td>" + "</tr>";  
  15.                     $("#tBody").append(tr);  
  16.                 });  
  17.                 $("#userTable").DataTable();  
  18.             }  
  19.         });  
  20.     });  
  21. </script>  
Step 6

Now run the application and see the output.

output