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 ...
随机推荐
- 通过自定义注解反射生成SQL语句
----------------------------------------Program.cs---------------------------------------- using Sys ...
- Android 多状态按钮 ToggleButton
ToggleButton 选中状态,未选中状态并且需要为不同的状态设置不同的显示文本. 属性: checked="true" ...
- [原创]linux简单之美（一）
原文链接:linux简单之美(一) 话说windows也有syscall,这是必须的.但是win的syscall可以直接call吗?可以是可以但是破费周折,搞成SDT之类的复杂概念.下面看看linux ...
- 如何彻底卸载sql server 2012
好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净的话,重新安装会出问题,所以下面就总结一些方法: ...
- Oracle EBS-SQL (SYS-10):锁定表查询.sql
/*死锁查询-1*/ SELECT o.object_name, l.session_id,l.process, l.locked_mode FROM v$locked_object l , dba_ ...
- Unix/Linux环境C编程入门教程(7) OPENBSDCCPP开发环境搭建
1. 年发起了OpenBSD 专案,希望创造一个注重安全的操作系统. 2.创建一个虚拟机. 3.选择默认的workstation10.0 4.我们选择稍后安装操作系统. 5.我们选择FreeBSD64 ...
- c语言libcurl 使用实例get/post方法+c语言字符串处理
#include <stdio.h> #include <curl/curl.h> #include <string.h> #include <ctype.h ...
- [Leetcode][Python]31: Next Permutation
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 31: Next Permutationhttps://oj.leetcode ...
- lua IDE for cocos2d-x development
原文链接:http://hi.baidu.com/balduc0m/item/648093dad238bd2a39f6f78e lua IDE for cocos2d-x development -- ...
- ceph 块设备
数据的存储设备? 数据的存储有3种形式,1种是直接以二进制数据的形式存储在裸设备(包括块设备)上,另外一种是以文件的形式经过文件系统管理进行存储.第三种就是以对象的形式进行对象存储.本篇讨论围绕着块设 ...