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 ...
随机推荐
- OCP prepare 20140628
1. null if nvl nvl2 NULLIF函数 Oracle NULLIF函数语法为NULLIF(表达式1,表达式2),如果表达式1和表达式2相等则返回空值,如果表达式1 ...
- jquery 自动调整图片大小
<script type="text/javascript"> $(document).ready(function(){ $('#cons img').each(fu ...
- Linux网络管理——TCP/IP四层模型
1. 网络基础 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB",&q ...
- Eclipse 修改编码格式
在Eclipse的开发使用中,我们经常使用的是UTF-8,但是刚刚安装的或者是导入的项目是其他编码的默认是GBK的,这就造成我们的项目乱码,一些中文解析无法查看,对我们的开发造成不便. 修改工作空间默 ...
- 非阻塞IO
设置描述符非阻塞的两种方法: 1,调用 open 时,设置,O_NONBLOCK; 2,调用 fcntl设置: 具体如下: ,open("/xxx/file1",O_RDWR|O_ ...
- Python核心编程笔记---- print@2
print 的输出从定向问题 print 可以用’>>‘来重定向输出,下面是例子 f = open('D:/python.txt','w+') print >> f," ...
- MySQLdb autocommit
MySQLdb 中 autocommit 默认是关闭的,下面是例子. import MySQLdb conn = MySQLdb.connect(host='127.0.0.1',user='root ...
- 手把手教程 Surface如何进行系统恢复？
手把手教程 Surface如何进行系统恢复? 2015-01-29 05:53:00 [ 中关村在线 原创 ] 作者: 周博林 | 责编:周博林 收藏文章 分享到 评论(10) Windo ...
- 提示text还能输入多少字节
1.添加jQuery自定义扩展 $(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function( ...
- shell脚本中常见的一些特殊符号和作用详解
这篇文章主要介绍了shell脚本中常见的一些特殊符号和它的作用详解,总结的很简洁,容易看懂,需要的朋友可以参考下 在编写Shell脚本时,我们需要会用到各种各样的特殊符号,通过这些特殊符号可以使我 ...