JS表格排序
var employees = []
employees[0] = {
name: "George",
age: 32,
retiredate: "March 12, 2014"
}
employees[1] = {
name: "Edward",
age: 17,
retiredate: "June 2, 2023"
}
employees[2] = {
name: "Christine",
age: 58,
retiredate: "December 20, 2036"
}
employees[3] = {
name: "Sarah",
age: 62,
retiredate: "April 30, 2020"
} //如何对上述数据排序呢?
//实际上是利用arr.sort(function...)
//而不是将某一列的数据都找出来排好序后 再去找对应的行 function sortBy(arr, prop, descend) {
//descend表示升序还是降序
descend = descend ? 1 : -1;
arr.sort(function(a, b) {
if (a[prop] < b[prop]) {
return -1 * descend;
} else if (a[prop] > b[prop]) {
return 1 * descend;
} else return 0;
});
}
sortBy(employees, 'name', true);
console.log(employees); ;
(function($) {
$.fn.extend({
tableSort: function() {
console.log(this); //jQ对象的table
var colHeads = this.find('thead');
var tbody = this.find('tbody');
var rows = tbody.find('tr');
var desend = [];
colHeads.on('click', 'td', function(e) {
var idx = $(this).index();
desend[idx] = !desend[idx]; //每一列都有一个变量 经过一次排序后下次再排序是反序
var descendflag = desend[idx] ? 1 : -1;
rows.sort(function(v1, v2) {
if (v1.cells[idx].innerText < v2.cells[idx].innerText) {
return -1 * descendflag;
} else if (v1.cells[idx].innerText > v2.cells[idx].innerText) {
return 1 * descendflag;
} else {
return 0;
}
});
rows.each(function(idx, item) {
tbody.append(item);
})
});
}
})
})(jQuery); $('#tableTest').tableSort(); function sortOrigin() {
var oTable = document.getElementById('tableTest');
var oHead = oTable.tHead;
var colHeads = oHead.getElementsByTagName('td');
var oTbody = oTable.tBodies[0];
var oBtn = document.getElementById('sort');
var arr = []; //用来存放每一个tr
var isAsc = true; //用来判断升序，还是降序 var colHeadsArr = [];
for (var i = 0, len = colHeads.length; i < len; i++) {
colHeadsArr.push(colHeads[i]);
}
//表头事件代理
oHead.addEventListener('click', function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === 'td') {
var idx = colHeadsArr.indexOf(target); //对第几列进行排序
//和colHeads一样 oTbody.rows只是NodeList不是数组
for (var i = 0; i < oTbody.rows.length; i++) {
arr[i] = oTbody.rows[i];
}
//此时arr是行构成的数组
arr.sort(function(v1, v2) {
if (v1.cells[idx].innerText < v2.cells[idx].innerText) {
return -1;
} else if (v1.cells[idx].innerText > v2.cells[idx].innerText) {
return 1;
} else {
return 0;
}
});
for (var j = 0; j < arr.length; j++) {
oTbody.appendChild(arr[j]);
}
}
}, false); }
所谓表格排序 实际上是 对象数组排序 --> []中的自定义sort函数
参考 http://www.cnblogs.com/xiao-t/archive/2012/12/27/2836248.html
<!DOCTYPE HTML>
<html> <head>
<meta charset="utf-8">
<title>table排序</title>
</head> <body>
<table id="tableTest" width="400" border="1">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>col1</td>
<td>COL2</td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>bbb</td>
<td>MANU</td>
<td>Znbsp;</td>
</tr>
<tr>
<td>5</td>
<td>eee</td>
<td>COLS</td>
<td>Ssp;</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>KK</td>
<td>bsp;</td>
</tr>
<tr>
<td>4</td>
<td>ddd</td>
<td>Dnbsp;</td>
<td>nbsp;</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>Pnbsp;</td>
<td>Mnbsp;</td>
</tr>
</tbody>
</table>
<input type="button" id="sort" value="表格排序" />
<script>
window.onload = function() {
var oTable = document.getElementById('tableTest');
var oHead = oTable.tHead;
var colHeads = oHead.getElementsByTagName('td');
var oTbody = oTable.tBodies[0];
var oBtn = document.getElementById('sort');
var arr = []; //用来存放每一个tr
var isAsc = true; //用来判断升序，还是降序 var colHeadsArr = [];
for (var i = 0, len = colHeads.length; i < len; i++) {
colHeadsArr.push(colHeads[i]);
}
//表头事件代理
oHead.addEventListener('click', function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === 'td') {
var idx = colHeadsArr.indexOf(target); //对第几列进行排序
//和colHeads一样 oTbody.rows只是NodeList不是数组
for (var i = 0; i < oTbody.rows.length; i++) {
arr[i] = oTbody.rows[i];
}
//此时arr是行构成的数组
arr.sort(function(v1, v2) {
if (v1.cells[idx].innerText < v2.cells[idx].innerText) {
return -1;
} else if (v1.cells[idx].innerText > v2.cells[idx].innerText) {
return 1;
} else {
return 0;
}
});
for (var j = 0; j < arr.length; j++) {
oTbody.appendChild(arr[j]);
}
}
}, false); }
</script>
</body> </html>
接下来做成插件的样子
JS表格排序的更多相关文章
- [Js]表格排序
思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <body> <input type="button" value=& ...
- js表格排序 & 去除字符串空格
// a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document ...
- JS实现表格排序
今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...
- 案例学习总结：原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- JS对表格排序(支持对序号，数字，字母，日期)
JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...
- js简单实现表格排序
昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...
- JS实现前台表格排序功能
JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
随机推荐
- C# 知识点记录(持续更新中）
从看C#入门经典开始系统的学习C#,本文主要记录学习过程中的一些知识点,也是我博客生涯的开始,比较重要成体系的部分会单重新写文章整理归纳. 1.一字不变的字符串 @字符 使转义序列不被处理,按照原样输 ...
- python heapq
这个模块(build-in)实现了一个堆的数据结构,完美的解决了Top-K问题,以后解决Top-K问题的时候,直接把这个模块拿来用就可以了 注意,默认的heap是一个小顶堆! heapq模块提供了如下 ...
- leetcode Valid Parentheses python
# 解题思路: # 创建一个字典映射关系 dicts# 使用一个栈stk 遍历字符串s 得到一个新的字符串curItem 如果lastItem在dicts中的value和它相等 不做任何操作# 如果不 ...
- JavaWeb核心编程之Tomcat安装和配置
什么是JavaWeb 在Sun的Java Servlet规范中, 对Java Web应用做了这样的定义: "Java Web应用由一组Servlet, HTML页面, 类, 以及其他可以被绑 ...
- 常用js表单文本域验证
1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...
- how to install git 1.8 rpm
git版本在低于1.8之前,对于私有项目会出现401的pull失败错误,只能通过升级git版本来解决 It appears that git18 is no longer available from ...
- [原创]obj-c编程17:键值观察(KVO)
原文链接:[原创]obj-c编程17:键值观察(KVO) 系列专栏链接:objective-c 编程系列 说完了前面一篇KVC,不能不说说它的应用KVO(Key-Value Observing)喽.K ...
- cdn与http缓存
http缓存与cdn相关技术 摘要:最近要做这个主题的组内分享,所以准备了一个星期,查了比较多的资料.准备的过程虽然很烦很耗时间,不过因为需要查很多的资料,因此整个过程下来,对这方面的知识影响更加 ...
- SQL Server 全文索引
create table Document(ID int not null,Name nvarchar(255) not null,Body nvarchar(max) not null);go cr ...
- AndroidAutoLayout 屏幕适配
https://github.com/hongyangAndroid/AndroidAutoLayout