查看: 2102|回复: 6
打印 上一主题 下一主题

[经验分享] 使用tablesorter插件(表格排序)

[复制链接]
   

671

主题

1

听众

3247

积分

中级设计师

Rank: 5Rank: 5

纳金币
324742
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

跳转到指定楼层
楼主
发表于 2012-1-13 09:53:43 |只看该作者 |倒序浏览
Sort me(将我有序化):使用tablesorter插件(表格排序)
这个表格排序插件能让我们在客户端按某一列进行排序,引入jQuery和这个插件的js文件,然后告诉插件你想要哪个表格拥有排序功能。
要测试这个例子,先在starterkit.html中加上像下面这一行的代码:

<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用不着:

$(document).ready(function() {
        $("#large").tableSorter();
});
现在点击表格的第一行head区域,你可以看到排序的效果,再次点击会按倒过来的顺序进行排列。
这个表格还可以加一些突出显示的效果,我们可以做这样一个隔行背景色(斑马线)效果:

$(document).ready(function() {
        $("#large").tableSorter({
                stripingRowClass: ['odd','even'],        // Class names for striping supplyed as a array.
                stripRowsOnStartUp: true                // Strip rows on tableSorter init.
        });
});
关于这个插件的更多例子和文档可以在 tablesorter首页找到.
几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的
经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.
当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.
本章的相关链接:

    Plugins for jQuery
    Tablesorter Plugin
分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

5969

主题

1

听众

39万

积分

首席设计师

Rank: 8Rank: 8

纳金币
-1
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

沙发
发表于 2012-1-27 23:28:39 |只看该作者
新年狂欢,挥手过往,尘埃落定。迎接新年,快乐无敌。放松心情,能量积蓄。共盼美好,祝福真切。闪亮人生,精彩同行。祝春节愉快!
回复

使用道具 举报

tc    

5089

主题

1

听众

33万

积分

首席设计师

Rank: 8Rank: 8

纳金币
-1
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

板凳
发表于 2012-3-3 23:32:14 |只看该作者
真是不错啊
回复

使用道具 举报

1023

主题

3

听众

359

积分

设计实习生

Rank: 2

纳金币
335582
精华
0

最佳新人

地板
发表于 2012-4-14 23:18:31 |只看该作者
凡系斑竹滴话要听;凡系朋友滴帖要顶!
回复

使用道具 举报

1023

主题

3

听众

359

积分

设计实习生

Rank: 2

纳金币
335582
精华
0

最佳新人

5#
发表于 2012-7-30 23:24:52 |只看该作者
佩服,好多阿 ,哈哈
回复

使用道具 举报

462

主题

1

听众

31万

积分

首席设计师

Rank: 8Rank: 8

纳金币
2
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

6#
发表于 2012-10-18 23:33:00 |只看该作者
提醒猪猪,千万不能让你看见
回复

使用道具 举报

tc    

5089

主题

1

听众

33万

积分

首席设计师

Rank: 8Rank: 8

纳金币
-1
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

7#
发表于 2013-3-12 23:18:10 |只看该作者
有意思!学习了!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-1 07:15 , Processed in 0.088812 second(s), 29 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部