怎么用sort()函数与文件碎片实现表格的前端排序
本篇内容介绍了"怎么用sort()函数与文件碎片实现表格的前端排序"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
表格排序在网页的利用也很多,特别是一些信息系统输出一个密密层层的表格给人看,客户肯定会提出表格排序的要求。很多人定式思惟地认为表格的排序一定要通过数据库后端进行交互,使用带 order by asc/desc 的语句去实现,然后再利用 ajax 似乎很完善似得。其实根本就不用与数据库打交道。在前端给出任意一个表格,都能够利用 sort() 函数与文件碎片实现表格的前端排序。在 jquery 里面是有一个 advanceTable 的插件做这件事,但是这个插件相当不好的是什么呢?与平常的插件一样,代码写得天花龙凤,没有任何注释,一点都不好改,而且不能实现于任意表格,任意浏览器。下面给出一种利用 Javascript 兼容 IE6 的原生态、无插件、不连接数据库的方法去实现这个功能。
一、基本目标
在网页中有以下的表格,点击表头的任意一项可以实现排序,再点击实现逆序排列
二、HTML布局
这个不会就没成心思了。 学过网页都知道表格怎样整。唯一注意的是,实现悬停鼠标手型表示,在前后放一个夹着就能够了,不用担心单击会跳转的问题,没有 href 属性就没问题了。为这个表格设置一个id为myTable,便于以后做事。
ID | 用户名 | 地点 |
---|---|---|
1 | 黄 | Antwerp |
2 | 赵 | Brussels |
3 | 张 | Netherlands |
4 | 李 | Gierle |
5 | 陈 | London |
6 | 李 | Mechelen |
7 | 钱 | Lier |
8 | 唐 | Luik |
9 | 莫 | 北京 |
10 | 王 | 香港 |
11 | 陈 | Lille |
三、核心脚本
关键是对 soft(softfunction())排序函数的写作,利用到文件碎片的思想
备注:如果单元格里面寄存的不是一个正常的值怎样办呢,或单元格里面有一堆东西,你可以为所有单元格赋予一个自定义属性,通过比对这个单元格的自定义属性,以后排序函数的取值改成 TR1.cells[Col].getAttribute("")+""便可,就变成比对这个自定义属性的值了,这类情况多见于动态网页里面的大工程。
"怎么用sort()函数与文件碎片实现表格的前端排序"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!