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