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 ...
随机推荐
- 利用oxygen编辑并生成xml文件，并使用JAVA的JAXB技术完成xml的解析
首先下载oxygen软件(Oxygen XML Editor),目前使用的是试用版(可以安装好软件以后get trial licence,获得免费使用30天的权限,当然这里鼓励大家用正版软件!!!) ...
- lightoj 1104 Birthday Paradox
题意:给定一个一年的天数,求最少多少人可以使至少两人生日同一天的概率不少于0.5. 用二分去做.检验一个数是否符合时,刚开始实用普通的方法,直接计算,超时了~~,上网搜了一下代码,一位大神使用一个数组 ...
- hdu4753
很简单的位模拟(bit-mask),可惜队友读题误以为很难,没有及时跟我交流,不然应该很早就可以出了. 很容易看出来,总共才16个点.24条边.用一个int类型数字就可以描述这个图了,按照16点的关系 ...
- C++多态的实现原理
1. 用virtual关键字申明的函数叫做虚函数,虚函数肯定是类的成员函数. 2. 存在虚函数的类都有一个一维的虚函数表叫做虚表.类的对象有一个指向虚表开始的虚指针.虚表是和类对应的,虚表指针是和对象 ...
- 浅谈C中的指针和数组（一）
本文转载地址:http://www.cnblogs.com/dolphin0520/archive/2011/11/09/2242138.html 在原文的基础上加入自己的想法作为修改. 指针是C/C ...
- MySQL：Error : Tablespace for table '`database`.`temp`' exists. Please DISCARD the tablespace before IMPORT.解决办法
今天在navicat上操作mysql数据库表,突然没有响应了.随后重启,mysql服务也终止了.随后启动服务,检查表,发现一张表卡没了,就重新添加一张表.报了一个错: Error : Tablespa ...
- phpcms-v9 前台模板文件中{pc}标签的执行流程
前台pc标签的使用:{pc:content 参数名="参数值" 参数名="参数值" 参数名="参数值"} 如: {pc:content ac ...
- EntityFramework、Dapper vs 草根框架性能
EntityFramework.Dapper vs 草根框架性能 扯淡 当前市面上 ORM 很多,有跑车型的,如 Dapper,有中规中矩型的,如 Mybatis.Net,也有重量型的,如 Entit ...
- poj2636---Electrical Outlets（插线板）
#include <stdio.h> #include <stdlib.h> int main() { int n,nc,i; scanf("%d",&am ...
- powerdesigner for sqlserver的一些实用配置
在实用powerdesigner生成sqlserver 数据表时常常遇到一些问题: 1.数据中定义的字段名称相同生成物理模型时会报错. 2.数据各表之间的主键不能定义一样的名称. 我现在的需求是将数据 ...