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.
- Method should be static because I have to call this method from Jquery Ajax.
- Method should be public type.
- Method should be a WebMethod( Available inside System.Web.Services NameSpace).
- 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.