<title>JS表格排序</title>
<script type="text/javascript">
var tableSort = {};
(function() {
var oTable = {};
var cellStatus = {};
var sortCells = {};
var limit = {};
var $ = function(id) {
return document.getElementById(id);
}
var objKeyExists = function(key, search) {
if (typeof key != 'number' && typeof key != 'string') {
return false;
}
for (k in search) {
if (k == key) {
return true;
}
}
return false;
}
var _addEvent = function(tableId, cellId) {
oTable[tableId].rows[0].cells[cellId].onclick = function() {
tableSort.sort(tableId, cellId);
}
}
var _addStyle = function(tableId, cellId) {
oTable[tableId].rows[0].cells[cellId].style.cursor = 'pointer';
}
var _addTitle = function(tableId, cellId) {
oTable[tableId].rows[0].cells[cellId].title = '点击排序';
}
var _sortTable = function(tableId, cellId) {
var rows = oTable[tableId].tBodies[0].rows;
var _rows = [];
for (var i = 1; i < rows.length; i++) {
_rows.push(rows[i]);
}
var status = -1;
if (objKeyExists(cellId, cellStatus[tableId])) {
status = 0 - cellStatus[tableId][cellId];
}
cellStatus[tableId][cellId] = status;
if (status == 1) {
oTable[tableId].rows[0].cells[cellId].innerHTML += ' <span style="font-family:webdings;">5</span>';
_rows.sort((function(id){
return function(a, b) {
return _sort(a, b, id);
}
}(cellId)));
} else {
oTable[tableId].rows[0].cells[cellId].innerHTML += ' <span style="font-family:webdings;">6</span>';
_rows.sort((function(id){
return function(a, b) {
return _rsort(a, b, id);
}
}(cellId)));
}
var oFragment = document.createDocumentFragment();
for (var i = 0; i < _rows.length; i++) {
_rows[i].className = i % 2 ? 'tr' : 'tr_spec';
_rows[i].cells[0].className = i % 2 ? 'td_spec2' : 'td_spec1';
if (limit[tableId] > 0) {
if (i >= limit[tableId]) {
_rows[i].style.display = 'none';
} else {
_rows[i].style.display = '';
}
}
oFragment.appendChild(_rows[i]);
}
oTable[tableId].tBodies[0].appendChild(oFragment);
}
var _cleanStatus = function(tableId, cellId) {
for(var i = 0; i < sortCells[tableId].length; i++) {
oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML = oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML.replace(/ <span style=\"font-family\: webdings\">[56]<\/span>$/ig, '');
}
}
var _sort = function(a, b, id) {
var param1 = a.cells[id].innerText;
var param2 = b.cells[id].innerText;
param1 = param1.replace(/[^\d.-]/g, '');
param2 = param2.replace(/[^\d.-]/g, '');
if (param1 == '-' || param1 == '') {
return 1;
}
if (param2 == '-' || param2 == '') {
return -1;
}
//如果两个参数均为字符串类型
if (isNaN(param1) && isNaN(param2)){
return param1.localeCompare(param2);
}
//如果参数1为数字,参数2为字符串
if (!isNaN(param1) && isNaN(param2)){
return -1;
}
//如果参数1为字符串,参数2为数字
if (isNaN(param1) && !isNaN(param2)){
return 1;
}
//如果两个参数均为数字
if (!isNaN(param1) && !isNaN(param2)){
if (Number(param1) > Number(param2)) {
return 1;
}
if (Number(param1) == Number(param2)) {
return 0;
}
if (Number(param1) < Number(param2)) {
return -1;
}
}
//return a.cells[id].innerText - b.cells[id].innerText;
}
var _rsort = function(a, b, id) {
var param1 = b.cells[id].innerText;
var param2 = a.cells[id].innerText;
param1 = param1.replace(/[^\d.-]/g, '');
param2 = param2.replace(/[^\d.-]/g, '');
if (param1 == '-' || param1 == '') {
return -1;
}
if (param2 == '-' || param2 == '') {
return 1;
}
//如果两个参数均为字符串类型
if (isNaN(param1) && isNaN(param2)){
return param1.localeCompare(param2);
}
//如果参数1为数字,参数2为字符串
if (!isNaN(param1) && isNaN(param2)){
return -1;
}
//如果参数1为字符串,参数2为数字
if (isNaN(param1) && !isNaN(param2)){
return 1;
}
//如果两个参数均为数字
if (!isNaN(param1) && !isNaN(param2)){
if (Number(param1) > Number(param2)) {
return 1;
}
if (Number(param1) == Number(param2)) {
return 0;
}
if (Number(param1) < Number(param2)) {
return -1;
}
}
//return b.cells[id].innerText - a.cells[id].innerText;
}
tableSort = {
init : function(tableId, cells, rows) {
oTable[tableId] = $(tableId);
sortCells[tableId] = cells;
cellStatus[tableId] = {};
limit[tableId] = rows ? rows : 0;
for (var i = 0; i < cells.length; i++) {
_addEvent(tableId, cells[i]);
_addStyle(tableId, cells[i]);
_addTitle(tableId, cells[i]);
}
if (rows > 0) {
for (var i = 1; i < $(tableId).rows.length; i++) {
if (i > rows) {
$(tableId).rows[i].style.display = 'none';
}
}
}
},
sort : function(tableId, cellId) {
_cleanStatus(tableId, cellId);
_sortTable(tableId, cellId);
}
}
})();
</script>
<style type="text/css">
*{font-size:12px;}
</style>
<table id="t1" width="400" border="1">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
<td>第五列</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>-0.1</td>
<td>2009-01-01</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>-0.3</td>
<td>2008-01-01</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>4</td>
<td>2008-03-01</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>-0.1</td>
<td>2009-02-01</td>
<td>-</td>
</tr>
</table>
<br />
<table id="t2" width="400" border="1">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
<td>第五列</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>-0.1</td>
<td>2009-01-01</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>-0.3</td>
<td>2008-01-01</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>4</td>
<td>2008-03-01</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>-0.1</td>
<td>2009-02-01</td>
<td>-</td>
</tr>
</table>
<script type="text/javascript">
tableSort.init('t1', [0, 1, 2, 3]);
tableSort.init('t2', [0, 1, 2, 3], 2);
</script>
分享到:
相关推荐
JavaScript 表格排序双击可进行按表格列排序
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
Blue Table,Js表格排序插件,排序完成之后需要执行的函数 可以收到一个对象作为参数,前一次排序的对象排序列坐标和当前被排序列坐标
JavaScript实现表格排序,按数字、日期、汉字排序!
收集起来js表格排序、支持中文、日期、英文、数值排序,多个Javascript表格排序方法,完美解决
用js实现对表格的排序,小demo一个,希望对新手们有点帮助
带箭头的javascript表格排序。直接使用源码
超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序超简单表格排序
JavaScripr版表格排序实现点击表头即可排序
使用javascript在客户端对表格进行排序的例子
利用javaScript技术实现表格排序
套入表格,实现按列排序,含css样式,增强表格美观度。非常强大,非常好用,不容错过!
7. 所需要引用的js文件非常小巧,压缩版仅2.5k 8. 使用非常简单,可进行参数配置 1. 该功能在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过。 2. 排序数据不支持中文数据,这是一个缺陷
分享一款原生js table表格自动排序效果,个人感觉很好用
自定义表格排序(JS)
使用JavaScript实现表格排序,点击表头切换升序降序,非常简单
各种各样的js表格排序列子,只要修改一下参数就可以用了。
绝对是好东西 如果你刚好找这方面的资料要实现点击表头就产生排序,绝对实用,物超所值 轻量级JavaScript表格内容排序代码 对生产的html进行排序,不需要与数据库交互,速度性能好
js学习案例,实现一个完整的表格排序
web开发js实现的表格排序功能,web开发js实现的表格排序功能,web开发js实现的表格排序功能