jquery里table表格排序的上体方法和完整实例演示推荐 亲测

文章标签: jquery table 帮助手册 使用实例
  • :
  • 06-22 13:44
  • :
  • 26次
  • :
  • 0条
  • 0赞

简介本文主要和大家分享一个用jquery.tablesort插件来实现给table表格排序的方法,并且还有一个完整的在线实例演示。l

我们用jquery来实现网页里table表格的排序是非常简单的,引用jquery.tablesort插件就能非常轻易的实现的,而jquery.tablesort插件只是一个3KB的小插件:

jquery.tablesort表格排序插件下载


本文站长来和大家具体说说如何使用这个插件来实现给网页中的表格进行排序:


首先,网页里需要排序的表格,格式要按下面这样的格式:

<table>
    <thead>
        <tr>
            <th></th>
	    ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
	    ...
        </tr>
    </tbody>
</table>

然后,在引入jquery.tablesort源文件和jquery库后,可以直接用下面这样的语句来实现网页的排序:

$('table').tablesort();

可以看下面站长准备的在线实例演示:

jquery里table表格排序的在线演示


上面的语句只是可以对表格进行基础的排序,如果我们要让表格按单元格里的内容类型来排序的话,可以这样:

//按日期排序
$('thead th.date').data('sortBy', function(th,td,tablesort) {	
    return new Date(td.text());
});

//按数字大小进行排序
$('thead th.num').data('sortBy', function(th,td,tablesort) {	
    return Number(td.text());
});


如果我们要实现在点击表格的表头,进行对表格的排序时,在表头后面显示上下的箭头,可以在网页里添加如下的CSS样式:

<style type="text/css">  
    th.sorted.ascending:after {content: "\2191";}
    th.sorted.descending:after{content: "\2193";}  
</style>


您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-10-30 11:38:09