📌  相关文章
📜  如何使用 jQuery DataTables 插件处理事件?

📅  最后修改于: 2021-11-25 03:21:15             🧑  作者: Mango

DataTables是一个现代的 jQuery 插件,用于向我们网页的 HTML 表格添加交互式和高级控件。它是一个简单易用的 jQuery 插件,为开发人员的自定义更改提供了大量选项。 DataTables 的共同特点是排序、搜索、分页和多列排序。

在本文中,我们将学习使用插件处理 jQuery 事件。

需要实现的预编译文件是

  • CSS :

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

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

方法:我们有一个 HTML 表格,其中包含学生的数据,例如 ID、姓名、年龄、性别和每个人的评分。另一个以 id 为resultID 的“div”用于显示用户触发的事件的结果。插件的数据表使用代码的 JavaScript 部分中的表 id 进行初始化。这些事件是通过使用 jQuery 的on( ) 方法来处理的。 DataTable 插件的row().data()方法用于获取有关用户所选行的信息。

示例:以下示例演示使用 DataTable 插件处理 jQuery 事件。

HTML


   
      
      
              
      
      
        
      
      
        
      
      
   
   
      

Handling events in Datatable

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


输出:

  • 在行单击事件之前:
  • 行单击事件后: