jquery.tablesort表格排序—插件源文件下载和完整实例演示推荐 亲测

文章标签: table
  • :
  • 01-27 14:52
  • :
  • 48次
  • :
  • 0条
  • 0赞

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

jquery.tablesort插件是一款使用起来非常简单的表格排序插件,本文和你分享这款插件的官网及源码下载地址。


官网地址:

https://github.com/kylefox/jquery-tablesort


源码下载地址:

站长放在百度云里,可直接下载使用:

链接: https://pan.baidu.com/s/1rLmuBcf207hrIEmbtSZi1A 密码: wc5d


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


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

<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>


您正在找的文章可能是: