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

📅  最后修改于: 2021-08-30 10:16:39             🧑  作者: Mango

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

在本文中,我们将学习处理 DataTable 特定的顺序和分页事件。 Datatables 还返回许多自定义事件。

实现代码所需的预编译文件是

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

方法:使用 dt命名空间处理 DataTable 特定事件。所有事件都是用dt命名空间触发的。使用数据表on()方法自动附加dt命名空间。对表中的数据进行排序时会自动触发 Order 事件。每当使用分页功能时都会触发分页事件。

HTML 表格是用学生的数据设计的,其中id、name、age、gender标记作为他们的字段。创建带有 id 的orderResultIDpagingResultID 的HTML div 以在触发订单和分页事件时显示一条消息。

示例:以下示例代码演示了如何在触发 DataTable 特定事件时处理函数。表格下方显示了一条简单的消息。开发人员可以根据应用程序的需要编写函数。

HTML


  

    
  
    
  
    
    
  
    
    
  
    
    

  

    

Handling Datatable specific events

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


输出:

订单事件:

分页事件: