如何使用 DataTables 插件实现单行选择和删除？

DataTables是一个现代 jQuery 插件，用于向网页的 HTML 表格添加交互式和高级控件。它是一个非常易于使用的插件，具有多种选项供开发人员根据应用程序的需要进行自定义更改。该插件的功能包括分页、排序、搜索和多列排序。

在本文中，我们将演示使用DataTables插件选择行后单行删除的实现。

方法：在下面的例子中，数据表使用学生的详细信息从HTML表作为主要来源。表中的每一行显示一个学生信息的详细信息。

• 一个 DataTable 被初始化。
• 开发人员可以根据需要设置分页或搜索的功能，如代码的脚本部分所示。
• 该表是按照学生分数的降序设置的，只是为了显示排序用法。
• 检查用户选择的行是否具有“selected”类，然后将其删除。
• 如果该类未被“选中”，则它会从表中的所有其他行中删除，并将该类添加到被选中的行中。
• 单击按钮时，删除该行并将 draw() API 设置为 false。
• draw() API 用于反映表中操作后的更改。

需要实现的预编译文件是

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

示例：以下示例演示了上述显示单行选择然后删除行的方法。

HTML

  

  
    
    
  
    
    
  
    
    
    
  
    
    
    
  
    
        td {
            text-align: center;
        }
    

  

    Delete single row using DataTables plugin
  
    
    
        
            
                
                
                
                
                
            
        
  
        
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
  
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
  
            
                
                
                
                
                
            
            
                
                
                
                
                
            
  
        
    StudentIDStudentNameAgeGenderMarks ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST14Fiza31Female750ST15Silva34male985
    
  
    Select and Delete row
  
    
  
            /* 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);
                });
            });
    

  

输出：

• 点击按钮前：请注意，最后一列学生的分数是按降序排列的。

• 单击按钮后：以下输出显示学生姓名“William”的行被删除。