JQuery DataTable Client Side Processing

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

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.

<!—Jquery Datatable 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 -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!—Jquery Datatable js script -->
<!-- DataTables -->
<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.

<table id="userTable">
    <thead>
        <tr>
            <th> User Name </th>
            <th>Email Id</th>
            <th> Address </th>
            <th>Mobile Number</th>
        </tr>
    </thead>
    <tbody id="tBody"> </tbody>
</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.

public class UserList {
    public string UserName {
        get;
        set;
    }
    public string EmailId {
        get;
        set;
    }
    public string Address {
        get;
        set;
    }
    public string MobileNumber {
        get;
        set;
    }
}

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>.
   

   [WebMethod]
   public static List < UserList > ReturnUserList() {
       List < UserList > userList = new List < UserList > ();
       userList.Add(new UserList() {
           UserName = "Amit", EmailId = "[email protected]", Address = "Delhi", MobileNumber = "+9197"
       });
       userList.Add(new UserList() {
           UserName = "Amit", EmailId = "[email protected]", Address = "Patna", MobileNumber = "+91975"
       });
       userList.Add(new UserList() {
           UserName = "Abhi", EmailId = "[email protected]", Address = "Allahabad", MobileNumber = "+91967"
       });
       userList.Add(new UserList() {
           UserName = "Ankit", EmailId = "[email protected]", Address = "Bhagalpur", MobileNumber = "+91697"
       });
       userList.Add(new UserList() {
           UserName = "Denesh", EmailId = "[email protected]", Address = "Patna", MobileNumber = "+91937"
       });
       userList.Add(new UserList() {
           UserName = "Rahul", EmailId = "[email protected]", Address = "New Delhi", MobileNumber = "+9197"
       });
       return userList;
   }

Step 5

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

<script>
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "WebForm.aspx/ReturnUserList",
            dataType: "json",
            contentType: "application/json",
            success: function(response) {
                $.each(response.d, function(index, value) {
                    var tr = "<tr>";
                    tr += "<td>" + value.UserName + "</td>";
                    tr += "<td>" + value.EmailId + "</td>";
                    tr += "<td>" + value.Address + "</td>";
                    tr += "<td>" + value.MobileNumber + "</td>" + "</tr>";
                    $("#tBody").append(tr);
                });
                $("#userTable").DataTable();
            }
        });
    });
</script>

Step 6

Now run the application and see the output.