• UID30
  • 登录2016-10-11
  • 粉丝27
  • 关注104
  • 发帖50
  • 主页
  • 金币1032枚
原创写手
社区居民
忠实会员
追星一族
Kimi.Huang 发布于2015-08-17 18:37
0/2311

[前端开发]表格排序(tsorter)

楼层直达
1、 tsorter 简介
对于一些表格按“特定列”的“特定数值”进行排序,增强用户体验
2、tsorter 使用
2.1、下载
Github 地址:https://github.com/terrilldent/tsorter
2.2、引入
<script src="./js/tsorter.min.js"></script>
2.3、HTML
<table id="tsroter1" class="sortable">
    <thead>
        <tr>
            <th width="10%">排名</th>
            <th width="20%">网站名称</th>
            <th width="35%">网站简介</th>
            <th width="20%">网址</th>
            <th width="15%">注册用户</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>极分享</td>
            <td>极分享 —— 解决方案提供社区</td>
            <td><a href="http://finalshares.com/" target="_blank">http://finalshares.com/</a></td>
            <td>100W</td>
        </tr>
        <tr>
            <td>2</td>
            <td>zhTimer</td>
            <td>zhTimer-魔方玩家线上竞技平台</td>
            <td><a href="http://zhtimer.cn/" target="_blank">http://zhtimer.cn/</a></td>
            <td>10W</td>
        </tr>
        <tr>
            <td>3</td>
            <td>FreeBTC123</td>
            <td>FreeBTC123 - 免费获取比特币网址导航</td>
            <td><a href="http://freebtc123.com/" target="_blank">http://freebtc123.com/</a></td>
            <td>5W</td>
        </tr>
        <tr>
            <td>4</td>
            <td>作者博客</td>
            <td>HTML Table Sorting with JavaScript</td>
            <td><a href="http://www.terrill.ca/sorting/" target="_blank">http://www.terrill.ca/sorting/</a></td>
            <td>1W</td>
        </tr>
    </tbody>
</table>
2.4、Javascript
2.4.1、精简版
window.onload = function() {
    var sorter1 = tsorter.create('tsroter1');
}
2.4.2、复杂版
window.onload = function() {
    var sorter2 = tsorter.create('tsroter2', null, {
        'finalshare_numeric': function(row) {
            return parseInt(this.getCell(row).childNodes[0].nodeValue, 10) || 0;
        }
    });
}
3、tsorter 截图
3.1、拖拽排序之前

描述:拖拽排序之前

图片:0EFFF271-4008-47CB-833E-C221DA66A736.png

拖拽排序之前

3.2、拖拽排序之降序

描述:拖拽排序之降序

图片:93A665D4-43FC-4BF4-8AA7-505D6C69D61D.png

拖拽排序之降序

3.3、拖拽排序之升序

描述:拖拽排序之升序

图片:D4387EB4-A217-4171-800B-CA6B947733FC.png

拖拽排序之升序

4、 参数说明
var sorter = tsorter.create(tableID, initialSortColumn, customDataAccessor);
4.1、tableID —— 需要添加排序功能的 table 的 id
4.2、initialSortColumn —— 初始排序字段序号
4.2.1、比如上面的 tsroter1,如果希望初始排序字段为 ``网址``,则 ``initialSortColumn`` 为 3,即为 thead 中 th 的索引,从 0 开始
4.2.2、如果不需要初始化字段,则传 ``null`` 即可
4.3、customDataAccessor —— 自定义排序类型,见下
5、 排序类型
为 ``th`` 添加属性 ``data-tsorter="numeric";``
5.1、内置排序类型
switch(sortType) {
    case "link":
        return function(row){
            return that.getCell(row).firstChild.firstChild.nodeValue;
        };
    case "input":
        return function(row){
            return that.getCell(row).firstChild.value;
        };
    case "numeric":
        return function(row){
            return parseFloat( that.getCell(row).firstChild.nodeValue, 10 );
        };
    default: /* Plain Text */
        return function(row){
            return that.getCell(row).firstChild.nodeValue;
        };
}
5.1.1、numeric —— 单元格元素为: 整型、浮点型
5.1.1.1、获取整型、浮点型是通过下述方式
return parseFloat( that.getCell(row).firstChild.nodeValue, 10 );
5.1.1.2、因此,对于 100W 这种直接使用 numeric 即可
5.1.2、link —— 单元格元素为: 链接
5.1.3、input —— 单元格元素为: input 框 value 值
5.1.4、default —— 默认,单元格元素为: 字符串
5.2、自定义排序类型
5.2.1、例如 2.3.2 中的 finalshare_numeric
6、排序箭头
6.1、点击 ``thead`` 后,``tsorter`` 会为 ``th`` 添加 ``descend`` 或 ``ascend``
6.2、添加排序箭头只要为其添加对应的样式即可
6.2.1、示例 1
.sortable th.descend:after {content: "\25B2"}
.sortable th.ascend:after {content: "\25BC"}
6.2.2、示例 2
.sortable th.descend {background: #E4EDFC 95% 50% url('../img/caret_up.gif') no-repeat}
.sortable th.ascend {background: #E4EDFC 95% 50% url('../img/caret_down.gif') no-repeat}
7、多表格
只需将需要排序的 table 调用一次 tsorter.create 即可
window.onload = function() {
    var sorter1 = tsorter.create('tsroter1');
    var sorter2 = tsorter.create('tsroter2', null, {
        'finalshare_numeric': function(row) {
            return parseInt(this.getCell(row).childNodes[0].nodeValue, 10) || 0;
        }
    });
}
8、 源码示例
表格排序(tsorter).zip
9、参考链接
[1] tsorter@TT4IT, JavaScript Table Sorter using Quick Sort
[2] Blog@Terrill Dent, Table Sort Example

Note:本源代码由“极分享”社区创建,添加或者修改,我们会持续优化源代码以提供更好的解决方案,更多详情和支持请前往finalshares.com
[Kimi.Huang于2015-08-26 14:36编辑了帖子]

0人打赏
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 60118/343   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 33292/188   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 31888/141   省时省力的Android组件群来了,非常棒的原型参考

  • 29032/226   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 26218/2   超全!整理常用的iOS第三方资源

  • 25780/0   Python爬虫:常用浏览器的useragent

  • 24732/70   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 22948/138   2016抢红包软件及源码

  • 19964/29   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 19805/25   Android工程师面试题大全

  • 19227/27   2016程序员跳槽全攻略

  • 19013/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 18522/20   码魂:程序员的牛B漫画

  • 16871/3   吐槽那些程序员的搞笑牛逼注释

  • 16850/149   Android版类似UC浏览器:非常赞,产品级的源码

  • 15704/1   iOS 动画总结

  • 15296/10   2016年最全的Android面试考题+答案 精编版

  • 15252/41   一个绚丽的loading动效分析与实现!

  • 14814/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 14761/83   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 14662/10   女程序员的梦,众网友的神回复

  • 14539/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 14467/11   年会上现场review代码是怎么样的体验!

  • 14204/23   个人收集的Android 各类功能源代码

  • 14108/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 13287/19   珍藏多年的素材,灵感搜寻网站

  • 13235/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 12905/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 12777/15   基于Android支付宝支付设计和开发方案

  • 12754/74   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 12513/20   Android福利第三波【Android电子书】

  • 12333/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12170/18   65条最常用正则表达式,你要的都在这里了

  • 12166/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 12045/70   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 11744/7   用程序员的姿势抢过年的火车票

  • 11678/7   一张图搞定iOS学习路线,非常全面

  • 11643/0   iOS中文版资源库,非常全

  • 11631/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 11157/10   成为Java顶尖程序员 ,看这11本书就够了

  • 10902/18   一张图搞定Android学习路线,非常全面

  • 10835/10   微信支付终于成功了(安卓,iOS),在此分享

  • 10485/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 10456/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 10371/29   【持续更新中】Android福利贴(一):资料源码

  • 10348/0   GitHub iOS 库和框架Top100 

  • 9923/4   46 个非常有用的 PHP 代码片段

  • 9703/3   即时通信第三方库

  • 9605/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 9505/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9464/8   流媒体视频直播方案

  • 9314/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 9210/18   八个最优秀的Android Studio插件

  • 9161/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 9070/9   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 8635/6   开箱即用!Android四款系统架构工具

  • 8526/3   一张图看清Linux 内核运行原理

  • 8421/10   十大技巧快速提升Android应用开发性能

  • 8399/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8090/1   Android性能优化视频,文档以及工具

  • 返回顶部