jQuery DataTable With A Delete button

In this blog, I will show how to use jQuery DataTable with the Delete button.

Why should we use jQuery Datatable

jQuery Datatable is very lightweight and gives us some inbuilt functionalities like searching and sorting etc.

In order to implement the jQuery Datatable, follow the below mentioned steps.

Step 1

Add jQuery script and jQuery Datatable CSS and JS inside the head section of the page. 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 an id to the table and its body. Before moving to the next step, please be sure that your table is in a proper format.

<table id="userTable">
    <thead>
        <tr>
            <th> User Name </th>
            <th>Email Id</th>
            <th> Address </th>
            <th>Mobile Number</th>
            <th>Action</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 five auto-implemented properties, as you can see in the below code.

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

Step4

Now, create a method which will return the value to bind the table.

Note - Please focus on these points while creating a method.

1. The method should be static because I have to call this method from jQuery AJAX.
2. The method should be of public type.
3. The 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() {
           UserID = "1", UserName = "Amit", EmailId = "[email protected]", Address = "Delhi", MobileNumber = "+9197"
       });
       userList.Add(new UserList() {
           UserID = "2", UserName = "Amit", EmailId = "[email protected]", Address = "Patna", MobileNumber = "+91975"
       });
       userList.Add(new UserList() {
           UserID = "3", UserName = "Abhi", EmailId = "[email protected]", Address = "Allahabad", MobileNumber = "+91967"
       });
       userList.Add(new UserList() {
           UserID = "4", UserName = "Ankit", EmailId = "[email protected]", Address = "Bhagalpur", MobileNumber = "+91697"
       });
       userList.Add(new UserList() {
           UserID = "5", UserName = "Denesh", EmailId = "[email protected]", Address = "Patna", MobileNumber = "+91937"
       });
       userList.Add(new UserList() {
           UserID = "6", UserName = "Rahul", EmailId = "[email protected]", Address = "New Delhi", MobileNumber = "+9197"
       });
       return userList;
   }

Step 5

Now, call the webmethod ReturnUserList from jQuery AJAX. Write the code inside the head section of .aspx page.

I used UserId property to define all the rows uniquely. By Selecting the UserID property, I will delete the respective row.

 

Now, each button has onclick event with its respective id parameter. If I will click on any button, the CallMe function will get executed and the respective id parameter will be passed.

 

Inside the CallMe function, we can identify which button is clicked by its id and we can perform any operation, like update, delete etc.

<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 += "<td>" + "<input type='button' id='" + value.UserID + "' onclick='CallMe(" + value.UserID + ")' value='Delete'>" + "</td>" + "</tr>";
                    $("#tBody").append(tr);
                });
                $("#userTable").DataTable();
            }
        });
    });
</script>

Step 6

Now, define the CallMe function of jQuery and assign one parameter which will get the button id to perform the operation. Write the code to perform any operation on the id.

function CallMe(data) {
    alert(data);
}.

Step 7

Now, run the application and see the output.