如何使用 jQuery DataTables 插件初始化多个表？

DataTables是一个现代的 jQuery 插件，用于向我们网页的 HTML 表格添加交互式和高级控件。它是一个非常易于使用的插件，具有多种选项供开发人员根据应用程序需要进行自定义更改。该插件的功能包括分页、排序、搜索和多列排序。

在本文中，我们将学习使用 jQuery DataTables插件初始化多个 HTML 表格

需要实现的预编译文件是

CSS：

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

JavaScript：

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

示例：初始化 多张桌子 使用 table.display选择器用一行代码处理。两个表可以一起操作，但它们是独立执行的。

  

  
    
  
    
  
    
    
  
    
    
    
  
    
    
    

  

    
        Multiple tables operations
        using jQuery Datatables
    
  
    
    
        
            
                
                
                
                
                
            
        
  
        
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
        
    StudentIDStudentNameAgeGenderMarks ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST11Ginny31male560ST12Flod45Female342ST13Marshy23Female470ST13Kennedy43male313ST14Fiza31Female750ST15Silva34male985
    
  
    
        
            
                
                
                
                
                
            
        
        
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
        
    StudentIDStudentNameAgeGenderMarks ScoredST15Varun41male262ST16Waheeda47Female373ST17Charu31female475ST18Dhriti45female227ST19Haritha39female295ST20Faran39male340ST21Gaurav31male562ST22Fenny41Female349ST23Mamta29Female471ST23Kamat44male319
  
    
        /* Initialization of datatables */
        $(document).ready(function () {
            $('table.display').DataTable();
        });
    

  

输出：

以下输出显示两个表的数据都在初始化后加载。

以下输出显示两个表都是独立执行的，显示了“女”学生的“搜索”操作。