如何使用 jQuery DataTables 插件处理事件？

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 ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST11Ginny31male560ST12Flod45Female342ST13Marshy23Female470ST13Kennedy43male313ST14Fiza31Female750ST15Silva34male985
      
      
      
         <!--Initialization of datatables -->
          $(document).ready(function() {               
               
              var datatable = $('#tableID').DataTable();
               <!--On click of one row -->
               $('#tableID tbody').on('click', 'tr', function () 
               {
                  var data = datatable.row( this ).data();
                  <!--It displays the selected user information -->
                  $("#resultID").show().html("<b>User clicked on</b> "
                  +data[0]+' row '+
                  '<b> with Name:</b> '
                  +data[1]+ '<b> ,Age:</b> '+data[2]+'<b> ,Marks:</b> '
                  +data[4]);
             });
         });   
               
      
   

输出：

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