如何使用 jQuery DataTables 插件在回调中使用 API？

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

在本文中，我们将学习在回调中使用 API。显示了一个非常简单的示例，开发人员可以根据应用程序的需要添加功能。

需要实现的预编译文件是：

• CSS CDN 链接：

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

• JavaScript CDN 链接：

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

方法：以上所有文件都包含在用于处理数据表的进一步实现中。使用一个简单的学生表及其详细信息，如学生 ID、姓名、年龄、性别和得分。该表使用代码的 JavaScript 部分中的 jQuery DataTable 插件进行初始化。单击事件时，它获取单元格节点并绘制结果。插件的$() .API方法用于获取表格主体中的所有单元格节点，然后对它们执行相关操作。过滤器将应用于具有单元格内值的表格。

示例：以下示例显示了单击事件回调中 API 的使用。该Initcomplete（初始化完成回调）是有用的，当学生表的初始化，满载，并提请知道。了解配置连接到表的组件很有用。

HTML

  
    
    
    
    
    
    
    
    
  
  
  
    Using API in callbacks
    
    
      
        
          
          
          
          
          
        
      
      
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
  
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
        
          
          
          
          
          
        
      
    StudentIDStudentNameAgeGenderMarks ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST11Ginny31male560ST12Flod45Female342ST13Marshy23Female470ST13Kennedy43male313ST14Fiza31Female750ST15Silva34male985
  
    
      <!--Initialization of datatables -->
  
      $(document).ready(function () {
        $("#tableID").DataTable({
          initComplete: function () {
                
            // Getting API instance
            var api = this.api();
              
            // On click event, get cell nodes
            api.$("td").click(function () {
              api.search(this.innerHTML).draw();
            });
          },
        });
      });
    
  

输出：

• API回调前：

回调前

• API回调后：