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.
<!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 =
<!--jQuery library file -->
< script type = "text/javascript" </ script >
<!--Datatable plugin JS library file -->
< script type = "text/javascript" src =
</ 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.