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
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https://code.jquery.com/jquery-3.5.1.js https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Example: The following example demonstrates the above approach showing single row select and then delete the row.
HTML
<!DOCTYPE html> < html > < head > < meta content=" initial-scale = 1 , maximum-scale = 1 , user-scalable = 0 " name = "viewport" /> < meta name = "viewport" content = "width=device-width" /> <!--Datatable plugin CSS file --> < link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" /> <!--jQuery library file --> < script type = "text/javascript" src = "https://code.jquery.com/jquery-3.5.1.js" > </ script > <!--Datatable plugin JS library file --> < script type = "text/javascript" src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js" > </ script > < style > td { text-align: center; } </ style > </ head > < body > < h2 >Delete single row using DataTables plugin</ h2 > <!--HTML tables with student data--> < table id = "tableID" class = "display" style = "width:100%" > < thead > < tr > < th >StudentID</ th > < th >StudentName</ th > < th >Age</ th > < th >Gender</ th > < th >Marks Scored</ th > </ tr > </ thead > < tbody > < tr > < td >ST1</ td > < td >Prema</ td > < td >35</ td > < td >Female</ td > < td >320</ td > </ tr > < tr > < td >ST2</ td > < td >Wincy</ td > < td >36</ td > < td >Female</ td > < td >170</ td > </ tr > < tr > < td >ST3</ td > < td >Ashmita</ td > < td >41</ td > < td >Female</ td > < td >860</ td > </ tr > < tr > < td >ST4</ td > < td >Kelina</ td > < td >32</ td > < td >Female</ td > < td >433</ td > </ tr > < tr > < td >ST5</ td > < td >Satvik</ td > < td >41</ td > < td >male</ td > < td >162</ td > </ tr > < tr > < td >ST6</ td > < td >William</ td > < td >37</ td > < td >Female</ td > < td >372</ td > </ tr > < tr > < td >ST7</ td > < td >Chandan</ td > < td >31</ td > < td >male</ td > < td >375</ td > </ tr > < tr > < td >ST8</ td > < td >David</ td > < td >45</ td > < td >male</ td > < td >327</ td > </ tr > < tr > < td >ST9</ td > < td >Harry</ td > < td >29</ td > < td >male</ td > < td >205</ td > </ tr > < tr > < td >ST10</ td > < td >Frost</ td > < td >29</ td > < td >male</ td > < td >300</ td > </ tr > < tr > < td >ST14</ td > < td >Fiza</ td > < td >31</ td > < td >Female</ td > < td >750</ td > </ tr > < tr > < td >ST15</ td > < td >Silva</ td > < td >34</ td > < td >male</ td > < td >985</ td > </ tr > </ tbody > </ table > < br /> < button id = "btnID" >< b >Select and Delete row</ b ></ button > < script > /* Initialization of datatables */ $(document).ready(function () { // Paging and other information are // disabled if required, set to true var mytableVar = $('#tableID').DataTable({ "paging": false, "info": false }); // Ordering the table in descending // order of students marks mytableVar.order([[4, 'desc']]).draw(false); $('#tableID tbody').on('click', 'tr', function () { // Check for 'selected' class and remove if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { mytableVar.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); // On button click, remove the row with setting // the draw() to false // draw() API is used to reflect the changes // after a action $('#btnID').click(function () { mytableVar.row('.selected').remove().draw(false); }); }); </ script > </ body > </ html > |
Output:
- 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.
Contact Us