服务器端排序会导致大量的带宽占用，下面是用javascript进行客户端排序。
在网上查到了几个比较简单的，但是对日期类型的排序有问题：有的是按字符串排的，有的只能对10/28/2009这种格式的有用。自己参照着又写了个。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户端表格排序</title>
<script type="text/javascript">
//转换器，将列的字段类型转换为可以排序的类型：String,int,float
function convert(sValue, sDataType) {
switch(sDataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return Date.parse(sValue.replace(/\-/g,"/"));//把日期型转换为整数:距离1970-1-1 00:00:00的毫秒数
default:
return sValue.toString();
}
}
//排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var value1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);//获得上一个单元格的值
var value2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);//获得下一个单元格的值
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
//排序表格的方法,sTableID：表格的ID, iCol：列的索引, sDataType：列的类型
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];//得到表格的内容部分
var aRows = oTBody.rows;//得到表格体的行对象的集合
var aTRs = new Array;//创建一个数组，胜于保存aRows中行引用。
var oTheadCells = oTable.tHead.rows[0].cells;
//没有升序降序的图片，用箭头表示了："↑"表示升序排列,"↓"：表示降序排列
for(var i = 0; i < oTheadCells.length; i++)
{
var lastChar = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.charAt(oTable.tHead.rows[0].cells[i].firstChild.nodeValue.length-1);
if(i == iCol) {
if(lastChar=='↑')
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↑","↓");
else if(lastChar=='↓')
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↓","↑");
else
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue + "↑";
}
else{
oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↑","").replace("↓","");
}
}
//将所有列放入数组
for (var i=0; i < aRows.length; i++) {
aTRs[i] = aRows[i];
}
//判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
//使用数组的sort方法，传进排序函数
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();//创建一个文档碎片
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);//向碎片中加入每一行数据
}
//删除原来表中的数据，并添加新的已排序后的数据
oTBody.appendChild(oFragment);
//记录最后一次排序的列索引
oTable.sortCol = iCol;
}
</script>
</head>
<body>
<p>点击表格标题进行排序</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0)"
style="cursor:pointer">字符串</th>
<th onclick="sortTable('tblSort', 1, 'date')"
style="cursor:pointer">时间</th>
<th onclick="sortTable('tblSort', 2, 'float')"
style="cursor:pointer">数字</th>
</tr>
</thead>
<tbody>
<tr>
<td>张</td>
<td>1986/10/28 20:20:20</td>
<td>2</td>
</tr>
<tr>
<td>张</td>
<td>1986-10-28 20:10:20</td>
<td>2</td>
</tr>
<tr>
<td>王</td>
<td>2009-10-1</td>
<td>4</td>
</tr>
<tr>
<td>李</td>
<td>1949-10-1</td>
<td>1.2</td>
</tr>
<tr>
<td>赵</td>
<td>2002-5-8</td>
<td>4.6</td>
</tr>
<tr>
<td>James</td>
<td>2029-10-8</td>
<td>1</td>
</tr>
<tr>
<td>Matthew</td>
<td>2005-9-9</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
JavaScript 表格排序双击可进行按表格列排序
JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合，旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中，表格是一种常用的数据展示方式，而JavaScript能够为表格提供强大的交互...
总结来说，实现JavaScript表格排序并高亮显示的关键在于理解DOM操作、数组排序以及CSS样式的应用。通过编写比较函数、遍历和排序表格行，以及更新单元格样式，我们可以创建出具有动态排序和高亮功能的表格。这个过程...
通过以上步骤，你将能够构建一个功能完善的JavaScript表格排序功能，同时利用面向对象编程的思想提高了代码的可维护性和复用性。在学习这个案例资料时，务必仔细研究每个部分，理解其背后的逻辑，并尝试自己动手实践...
JavaScript表格排序是一个在网页开发中常见的需求，尤其是在处理大量数据时。这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了...
总结来说，处理JavaScript表格中中文混合数字的排序需要自定义排序函数，该函数能区分并适当地处理不同数据类型。通过这样的方法，我们可以确保数据在展示时始终按预期的方式排序，提供良好的用户体验。这个压缩包...
### Auntion-TableSort：一款国人开发的JavaScript表格排序工具 #### 一、概述 Auntion-TableSort是一款由国人开发的JavaScript表格排序插件，它能够方便地实现对HTML表格中的数据进行排序操作。该插件不仅适用于...
网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序)
总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...
内涵表格排序代码, 支持string number， 不支持date类型。
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)">...
表格排序 是Javascript实现, 就目前我看，是最好的排序实现。 可以排序：数字，日期，字母。 只需要两句话实现多种排序功能。 <script type="text/javascript"> var sorter=new table.sorter("tableId"); sorter....
而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`...
以下是对33种JavaScript表格排序控件的详细说明： 1. jQuery tablesorter（1）：这是一个基于jQuery的插件，支持多种类型的排序，包括数字、日期和自定义排序。它具有高度可定制性，允许用户添加自定义排序标志和...
这个轻量级的JavaScript表格排序实现非常实用，特别适合小型项目或对性能要求高的场景。它可以避免引入大型库的开销，同时也易于理解和维护。当然，对于更复杂的需求，例如处理日期或对象排序，可能需要进一步扩展这...
内容索引:脚本资源,Ajax/JavaScript,表格排序,表头 JavaScript表格排序，点击表头即可排序，此脚本支持中文汉字排序、中英文混合排序、数据大小排序、文件名称类型排序、日期排序、价格排序、中文和数字排序;...
**Blue Table：JavaScript表格排序插件** 在网页开发中，数据展示经常需要用到表格，而对表格数据进行排序是用户交互中的常见需求。Blue Table是一款基于JavaScript的表格排序插件，它能够帮助开发者轻松实现表格...