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 ...
随机推荐
- 修改oracle内存
[oracle@bi11g bin]$ ./sqlplus /nolog SQL*Plus: Release 11.2.0.1.0 Production on Fri Dec 1618:39:36 2 ...
- OpenID倡议：别再创建新的用户名和密码
原文作者:Jeff Atwood 随着Stack Overflow开发工作的逐步深入,我们不可回避地碰到了这个问题:我们需要让用户登录,即使网络上用户名/密码已经泛滥成灾,我们也只能随波逐流.我已经有 ...
- 移动端下网页border：1px显示
解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewpor ...
- GoF——组合模式
组合模式:将对象组合成树形结构以表示“部分-真题”的结构层次.组合模式使得用户对单个对象和组合对象的使用具有一致性. 结构图: using System; using System.Collectio ...
- scala函数进阶与lazy的作用
内容如下. lazy修饰的变量可以延迟初始化,如下面所示,文件未必存在,file变量未必有内容.
- J2SE知识点摘记(十二)
1. File类 下面的构造方法可以用来生成File对象 File(String directoryPath) geName()用于返回文件名,getParent()返回父目录名,exist ...
- 自写的LastPos，寻找字符串里的最后一个字符，RTL里没有提供这个函数——Delphi的String下标是从1开始的
已经好几次了,没有这个函数还是感觉很不方便,所以自己写了一个: function LastPos(strFind :string; ch: Char): integer; var i, n: inte ...
- ulimit 说明
ulimit官方描述 Provides control over the resources available to the shell and to processes started by it ...
- _.remove的用法
var array = [1, 2, 3, 4]; var evens = _.remove(array, function(n) { return n % 2 == 0; }); console.l ...
- SPOJ 3267 求区间不同数的个数
题意:给定一个数列,每次查询一个区间不同数的个数. 做法:离线+BIT维护.将查询按右端点排序.从左到右扫,如果该数之前出现过,则将之前出现过的位置相应删除:当前位置则添加1.这样做就保证每次扫描到的 ...