How to implement single row select and delete using DataTables plugin ?
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application’s need. The plugin’s features include pagination, sorting, searching, and multiple-column ordering.
In this article, we will demonstrate the implementation of single row deletion after selecting the row using the DataTables plugin.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
Approach: In the following example, DataTables uses the student details from the HTML table as the main source. Each row in the table shows details for one student’s information.
- A DataTable is initialized.
- The developer can set the features of paging or searching as per the need as shown in the script part of the code.
- The table is set in the descending order of student’s marks just to show the ordering usage.
- Check if the row selected by the user has class “selected” and then remove it.
- If the class is not “selected” then it is removed from all other rows in the table and the class is added to the row being selected.
- On button click, remove the row along with setting the draw() API to false.
- The draw() API is used to reflect the changes after an action in the table.
The pre-compiled files which are needed to implement are
Example: The following example demonstrates the above approach showing single row select and then delete the row.
- Before Clicking the button: Notice that the marks scored by the students in the last column are in descending order.
- After Clicking the button: The following output shows that the row for student name “William” is deleted.