Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to implement single row select and delete using DataTables plugin ?

  • Last Updated : 31 May, 2021

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



 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :