如何使用 jQuery DataTable 插件处理 DataTable 特定事件？

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 的orderResultID和pagingResultID 的HTML div 以在触发订单和分页事件时显示一条消息。

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

HTML

  

    
  
    
  
    
    
  
    
    
    
  
    
    
    

  

    Handling Datatable specific events
  
    
    
        
            
                
                
                
                
                
            
        
  
        
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
  
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
        
    StudentIDStudentNameAgeGenderMarks ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST11Ginny31male560ST12Flod45Female342ST13Marshy23Female470ST13Kennedy43male313ST14Fiza31Female750ST15Silva34male985
    
  
    
    
  
    
  
            /* Initialization of datatables */
            $(document).ready(function () {
  
                /* events like order and paging are fired */
                    $('#tableID')
                        .on('order.dt', function () {
                            $("#orderResultID").show()
                            .html("<b>Order event fired!</b> ");
                        }
                        ).DataTable();
  
                $('#tableID').on('page.dt', function () {
                    $("#pagingResultID").show()
                    .html("<b>Paging event fired!</b> ");
                }
                ).DataTable();
            });
    

  

输出：

订单事件：

分页事件：