js实现漂亮表格+分页排序功能

TinyTable JavaScript Table Sorter：功能丰富且易于使用的表格排序器

最新推荐文章于 2023-05-10 09:32:31 发布

原创最新推荐文章于 2023-05-10 09:32:31 发布 · 706 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sorter #javascript #ViewUI

JavaScript，jQuery 专栏收录该内容

20 篇文章

订阅专栏

TinyTable JavaScript Table Sorter 是一个轻量级的表格排序器，仅2.5KB。它具备多种新功能，如列高亮、可选分页、链接和日期解析等。通过简单的初始化模式即可使用，支持自定义列排序、交替行高亮、列头类切换、自动数据类型识别和部分列排序。已针对主流浏览器进行了测试，并免费提供给个人或商业项目使用，遵循creative commons 许可。社区支持和付费支持服务也已准备好。

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.