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 = "[email protected]", Address = "Delhi", MobileNumber = "+9197"
    6. });
    7. userList.Add(new UserList() {
    8. UserName = "Amit", EmailId = "[email protected]", Address = "Patna", MobileNumber = "+91975"
    9. });
    10. userList.Add(new UserList() {
    11. UserName = "Abhi", EmailId = "[email protected]", Address = "Allahabad", MobileNumber = "+91967"
    12. });
    13. userList.Add(new UserList() {
    14. UserName = "Ankit", EmailId = "[email protected]", Address = "Bhagalpur", MobileNumber = "+91697"
    15. });
    16. userList.Add(new UserList() {
    17. UserName = "Denesh", EmailId = "[email protected]", Address = "Patna", MobileNumber = "+91937"
    18. });
    19. userList.Add(new UserList() {
    20. UserName = "Rahul", EmailId = "[email protected]", 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