如何使用jQuery通过分页使表格可搜索和排序？

jQuery FantasyTable 插件可帮助开发人员设计具有分页功能的可搜索和可排序的 HTML 表格。这个插件完全基于 JavaScript 和 HTML。

插件官方网站：请在实现代码时注意文件路径。

https://github.com/myspace-nu/jquery.fancyTable

示例 1：以下代码演示了使用 jQuery FantasyTable插件进行分页的简单搜索和排序。

HTML

    
        
        
          
        
    
    
      
        
            
              Table with search and sortable headings 
            
             
             
                 
                 
                 
             
             
                 
                 
                 
             
             
                 
                 
                 
             
             
                 
                 
                 
             
             
                 
                 
                 
             
             
                 
                 
                 
             
             
                 
                 
                 
             
             
                 
                 
                 
             
                  FirstnameLastnameAgePriyaSharma24ArunSingh32SamyWatson41SamsamderWatra42SamanthaChalla31SamuelMiranda45SamyJoseph37 
              
        
        
        
        
        
        
        
        
              
            $(document).ready(function() {
                $(".sampleTable").fancyTable({
                  /* Column number for initial sorting*/
                   sortColumn:0,
                   /* Setting pagination or enabling */
                   pagination: true,
                   /* Rows per page kept for display */
                   perPage:3,
                   globalSearch:true
                   });
                              
            });
        
    

输出：

• 执行前：

• 搜索执行：

• 分页输出：

示例 2：以下示例演示了globalSearchExcludeColumns等其他选项以及data-sortas=”case-insensitive”等数据属性的使用。它还处理回调函数，如onInit()和onUpdate() 。开发人员可以根据需要使用其他选项设置。

html

    
        
        
          
        
    
    
        
            Table with sortable headings and global search
            
                
                 
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                     
                     
                    
                    
                    
                    
                    
                     
                      
                    
                    
                    
                    
                    
                     
                       
                    
                    
                    
                    
                    
                    
                
            FirstnameLastnameProfessionAgeCityJohnCaprioEngineer37HyderabadBikramSharmaBusinessman42DelhiAmitChowdharyEngineer58ChennaiThomasEinsteinScientist35Mumbai            
        
          
        
        
        
        
        
        
                  
            $(document).ready(function(){
              
                $("#tableID").fancyTable({
                   sortColumn:0,
                   /* Setting pagination or enabling */
                   pagination: false,
                       globalSearch:true,
                    /* Exclude 2nd column from global search.*/
                   globalSearchExcludeColumns: [2],
                   onInit:function(){                 
                   /* On initialization of table */
                                 console.log({ element:this });
                                    },
                   onUpdate:function(){
                   /* On update like search and sort of table */                  
                    console.log({ element:this });
                   }
                       });                            
            });            
        
    

输出：

• 数据属性用法：下图显示了使用数据属性后的输出。
• 从搜索中排除列：以下输出显示从搜索功能中排除第二列。
• 回调函数输出：以下输出显示函数初始化和更新后的控制台。