jQuery plugin之tablesorter实践

最新推荐文章于 2021-08-05 17:29:03 发布

最新推荐文章于 2021-08-05 17:29:03 发布 · 153 阅读

文章标签：

#jQuery #JavaScript #CSS #ViewUI

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用jQuery.tablesorter插件使网页表格具备排序功能的方法，并实现了斑马纹和鼠标悬停高亮行的效果。

目标简单又明了：使页面中 table 可排序化。

开始实践：

在<head>中加入：

<link type="text/css" rel="stylesheet" rel="stylesheet" href="/css/jquery/sortable.css" />
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
    var enable_table_sort = true;
    var highlightline = 'lightLine';
    if( enable_table_sort ){
        $("table[class*=tablesorter]").tablesorter({widgets:['zebra']}); // 斑马纹在这实现
        $("table[class*=tablesorter]")
            .filter('tbody').children().each(function(idx){
                $(this)
                    .mouseover(function(){$(this).addClass(highlightline)})
                    .mouseout(function(){$(this).removeClass(highlightline)});
            });
    }
});
//-->
</script>

如此这般可使页面中所有 class中含有tablesorter样式的table 实现表格排序、斑马纹（各行换色）和行高亮了。

真是方便啊！今后可以做成tag或放在vm中了。

附件中有 jQuery.tablesorter 插件的完整包，含有doc的，用的朋友来下吧。