📌  相关文章
📜  如何使用 DataTables 插件实现单行选择和删除?

📅  最后修改于: 2021-10-29 06:05:40             🧑  作者: Mango

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


  

  
    
    
  
    
    
  
    
    
  
    
    
  
    

  

    

Delete single row using DataTables plugin

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
StudentIDStudentNameAgeGenderMarks Scored
ST1Prema35Female320
ST2Wincy36Female170
ST3Ashmita41Female860
ST4Kelina32Female433
ST5Satvik41male162
ST6William37Female372
ST7Chandan31male375
ST8David45male327
ST9Harry29male205
ST10Frost29male300
ST14Fiza31Female750
ST15Silva34male985
    
                  


输出:

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

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