📌  相关文章
📜  如何使用 jQuery DataTables 插件处理多行选择?

📅  最后修改于: 2021-11-07 08:26:02             🧑  作者: Mango

Datatables 是一个现代 jQuery 插件,用于向我们网页的 HTML 表格添加交互式和高级控件。它简单易用,有许多可供开发人员自定义更改的选项。其他常见功能是分页、搜索、排序和多列排序。

在本文中,我们将学习处理多行选择。显示了一个非常简单的示例,开发人员可以根据应用程序的需要添加功能。实现所需的预编译文件是:

CSS:

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

JavaScript:

https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

方法:使用一个简单的学生表,其中包含学生详细信息,例如学生 ID、姓名、年龄、性别得分。该表是使用 DataTable 插件初始化的。单击带有文本“所选行总数”的按钮时,它会给出表中当前所选行的总数。这是使用插件的rows().data() 方法完成的。

例子:

HTML


  
  
  
  
  
  
  
  


  

Handling Datatable multiple rows selection

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
StudentIDStudentNameAgeGenderMarks Scored
ST1Prema35Female320
ST2Wincy36Female170
ST3Ashmita41Female860
ST4Kelina32Female433
ST5Satvik41male162
ST6William37Female372
ST7Chandan31male375
ST8David45male327
ST9Harry29male205
ST10Frost29male300
ST11Ginny31male560
ST12Flod45Female342
ST13Marshy23Female470
ST13Kennedy43male313
ST14Fiza31Female750
ST15Silva34male985
  
     
  
  


输出:

  • 行选择前:

  • 行选择后:

  • 在不同页面中选择行后: