Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 31 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads