js实现漂亮表格+分页排序功能-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_12903/article/details/82408629

TinyTable JavaScript Table Sorter

This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.

To initialize a table sorter follow the pattern below:

 
   
        var 
        sorter =  
        new 
        TINY.table.sorter( 
        'sorter' 
        ); 
       
 
        sorter.head =  
        'head' 
        ;  
        //header class name 
       
 
        sorter.asc =  
        'asc' 
        ;  
        //ascending header class name 
       
 
        sorter.desc =  
        'desc' 
        ;  
        //descending header class name 
       
 
        sorter.even =  
        'evenrow' 
        ;  
        //even row class name 
       
 
        sorter.odd =  
        'oddrow' 
        ;  
        //odd row class name 
       
 
        sorter.evensel =  
        'evenselected' 
        ;  
        //selected column even class 
       
 
        sorter.oddsel =  
        'oddselected' 
        ;  
        //selected column odd class 
       
 
        sorter.paginate =  
        true 
        ( 
        false 
        );  
        //toggle for pagination logic 
       
 
        sorter.pagesize = 15 (20);  
        //toggle for pagination logic 
       
 
        sorter.currentid =  
        'currentpage' 
        ;  
        //current page id 
       
 
        sorter.limitid =  
        'pagelimit' 
        ;  
        //page limit id 
       
 
        sorter.init( 
        'table' 
        ,1); 
       
 
 

Before initialization, a new table sorter object must be created. The parameter taken by TINY.table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the initially sorted column index (optional). If you want to exclude a column from sorting add class=”nosort” to the appropriate table header. Table styling is completely customizable via the CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.