<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>K2046.TableSorter</title>
<style type="text/css">
body{font-size:12px;line-height:25px;}
tr{height:25px;}
th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;}
td{font-size:12px;text-align:center;}
.SortDescCss{background-image:url(http://k2046.cn/tb/Desc.gif);background-repeat:no-repeat;background-position:right center;}
.SortAscCss{background-image:url(http://k2046.cn/tb/Asc.gif);background-repeat:no-repeat;background-position:right center;}
</style>
</head>
<body>
代码:new TableSorter("tb1");<br />
效果:点击任意表头可执行排序.<br />
<table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb1">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br />
代码:new TableSorter("tb2", 0, 2, 5, 6);<br />
效果:点击表头0,2,5,6列可执行排序.<br />
<table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb2">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br /><br />
代码:new TableSorter("tb3").OnSorted = function(c, t)<br />
{<br />
alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));<br />
}<br />
效果:点击任意表头可执行排序并返回提示.<br />
<table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb3">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br />
<script language="javascript" type="text/javascript">
</script>
</body>
</html>
<script>
//----------- 排 序 -------------------------------------------
function TableSorter(table){
this.Table = this.$(table);
// alert(this.Table.innerHTML);
if(this.Table.rows.length <= 1){
return;
}
// alert(arguments[0]);
this.Init(arguments);
}
// 以下样式针对表头的单元格.
TableSorter.prototype.NormalCss = "NormalCss";// 没有执行排序时的样式.
TableSorter.prototype.SortAscCss = "SortAscCss";// 升序排序时的样式.
TableSorter.prototype.SortDescCss = "SortDescCss";// 降序排序时的样式.
// 初始化table的信息和操作.
TableSorter.prototype.Init = function(args){
this.ViewState = [];
// 设置表头的状态位，排序时根据状态判断升降序
for(var x = 0; x < this.Table.rows[0].cells.length; x++){
this.ViewState[x] = false;
}
// 参数args为数组，判断表头的那些字段需要排序，数组的第一个参数为要排序的表
if(args.length > 1){
for(var x = 1; x < args.length; x++){
// 循环判断每一个需要排序的表头字段的下标，是否大于表头的最大下标；
// 如果大的话说明是一个手误
// 如果正确在需要排序的表头字段添加onclick方法和相对的样式
// 代码:new TableSorter("tb2", 0, 2, 5, 6);<br />
// 效果:点击表头0,2,5,6列可执行排序.<br />
if(args[x] > this.Table.rows[0].cells.length){
continue;
}
else{
this.Table.rows[0].cells[args[x]].onclick = this.GetFunction(this,"Sort",args[x]);
this.Table.rows[0].cells[args[x]].style.cursor = "pointer";
}
}
}
// 参数不大于1，说明所有的字段都需要排序
else{
for(var x = 0; x < this.Table.rows[0].cells.length; x++){
this.Table.rows[0].cells[x].onclick = this.GetFunction(this,"Sort",x);
this.Table.rows[0].cells[x].style.cursor = "pointer";
}
}
}
// 简写document.getElementById方法.
TableSorter.prototype.$ = function(element){
return document.getElementById(element);
}
// 取得指定对象的脱壳函数.
TableSorter.prototype.GetFunction = function(variable,method,param){
// 在这里需要说明一下，variable-->对应的是this，method-->对应的是"Sort"，param对应的是需要排序表头的下标
// this代表这个类，其中包括所用的方法和属性。下面的方法相当于调用Sort()方法
return function(){
variable[method](param);
}
}
// 执行排序.
TableSorter.prototype.Sort = function(col){
// 定义判断排序字段的一个标志位，数字排序(自己写)和字符排序(JavaScript内置函数)
var SortAsNumber = true;
// 为表头设置样式
for(var x = 0; x < this.Table.rows[0].cells.length; x++){
this.Table.rows[0].cells[x].className = this.NormalCss;
}
// 定义放置需要排序的行数组
var Sorter = [];
for(var x = 1; x < this.Table.rows.length; x++){
Sorter[x-1] = [this.Table.rows[x].cells[col].innerHTML, x];
// alert(Sorter[x-1]);
// 判断需要排序字段的类型，分为数字型和非数字型
SortAsNumber = SortAsNumber && this.IsNumeric(Sorter[x-1][0]);
// alert(Sorter[x-1][0]);
}
// 如果是数字型采用下面的方法排序
if(SortAsNumber){
for(var x = 0; x < Sorter.length; x++){
for(var y = x + 1; y < Sorter.length; y++){
if(parseFloat(Sorter[y][0]) < parseFloat(Sorter[x][0])){
var tmp = Sorter[x];
Sorter[x] = Sorter[y];
Sorter[y] = tmp;
}
}
}
}
// 如果是非数字型的可以采用内置方法sort()排序
else{
Sorter.sort();
}
if(this.ViewState[col]){
// JavaScript内置函数，用于颠倒数组中元素的顺序。
Sorter.reverse();
this.ViewState[col] = false;
this.Table.rows[0].cells[col].className = this.SortDescCss;
}
else{
this.ViewState[col] = true;
this.Table.rows[0].cells[col].className = this.SortAscCss;
}
var Rank = [];
for(var x = 0; x < Sorter.length; x++){
Rank[x] = this.GetRowHtml(this.Table.rows[Sorter[x][1]]);
}
// alert(Rank[0]);
for(var x = 1; x < this.Table.rows.length; x++){
for(var y = 0; y < this.Table.rows[x].cells.length; y++){
this.Table.rows[x].cells[y].innerHTML = Rank[x-1][y];
// alert(Rank[x-1][y]);
}
}
this.OnSorted(this.Table.rows[0].cells[col], this.ViewState[col]);
}
// 取得指定行的内容.
TableSorter.prototype.GetRowHtml = function(row){
var result = [];
for(var x = 0; x < row.cells.length; x++){
result[x] = row.cells[x].innerHTML;
}
return result;
}
TableSorter.prototype.IsNumeric = function(num){
return /^\d+(\.\d+)?$/.test(num);
}
// 可自行实现排序后的动作.
TableSorter.prototype.OnSorted = function(cell, IsAsc){
return;
}
new TableSorter("tb1");
//new TableSorter("tb2", 0, 2 , 5, 6);
//new TableSorter("tb3").OnSorted = function(c, t)
//{
//alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
//}
</script>
相关推荐
在JavaScript编程中，"JS点击表头排序"是一种常见的用户交互功能，特别是在数据展示和管理的应用中。这个功能允许用户通过点击表格的列标题（即表头）来按该列的数据进行升序或降序排序。下面将详细介绍实现这一功能...
这个“纯js实现点击表头排序”的功能，就是一种轻量级的JavaScript解决方案，它不依赖任何外部库，如jQuery或类似的框架，从而减少了页面加载的时间，提高了性能。 首先，我们需要了解JavaScript中的数组方法，如`...
"固定表头，点击表头排序，拖动表格的列宽"这三个特性是提高用户交互性和体验的重要功能，广泛应用于各种数据密集型的网页应用中。下面我们将详细探讨这三个知识点。 1. **固定表头（Fixed Header）**： 当表格...
以下是对`tablesorter`实现HTML表格点击表头排序的详细讲解： 1. **安装与引入**：首先，你需要在项目中下载或引用`tablesorter`库。这可以通过CDN链接、npm安装或者直接下载js文件来完成。例如，你可以使用以下CDN...
在JavaScript中实现点击表头排序是一项常见的前端开发任务，它涉及到HTML、CSS和JavaScript的交互。这个功能在数据展示和管理上非常实用，比如在网页上的数据表格中，用户可以通过点击列头对数据进行升序或降序排列...
在JavaScript编程中，实现“js表格点击表头排序”是一个常见的功能需求，特别是在网页数据展示时，用户往往希望可以通过点击表头快速对数据进行升序或降序排列。本知识点将详细讲解如何在纯前端环境下，利用...
在网页开发中，数据展示通常会使用表格（Table）元素，而为了使用户能更方便地浏览和理解数据，我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript，因为它提供了对DOM操作和事件监听的...
**基于sorttable.js的表头排序扩展** 在Web开发中，数据展示往往涉及到大量的表格，而用户对于数据的直观理解与操作，一个重要的需求就是能够按照表格中的某一列进行升序或降序排序。`sorttable.js`是一个轻量级的...
在JavaScript中实现点击表格（Table）表头进行字段排序是一种常见的功能需求，特别是在网页数据展示时，用户往往希望可以通过点击列头对数据进行升序或降序排列。本示例将详细讲解如何通过JavaScript实现这一功能。 ...
这篇教程将详细介绍如何使用JavaScript实现这一功能，让使用者可以点击表头来轻松切换升序或降序排列。 首先，我们需要一个基本的HTML结构，包含一个表格以及用于排序的表头。例如： ```html <!DOCTYPE html> ...
2. **表头排序**：表头排序通常通过JavaScript实现，点击列头时触发事件，向后端发送带有排序字段和排序方式的请求。后端根据请求重新组织数据并返回，前端再刷新表格。DWZ.NET提供了一些内置的排序函数和事件处理，...
当表格中的数据量较大或者需要频繁更新时，用户通常期望能够通过点击表头来实现数据的升序或降序排列，这就是所谓的“表头排序”。JavaScript库`js-table-sorter`正为此目的设计，它允许开发者用纯JavaScript实现这...
实现点击表头排序的关键在于JavaScript事件监听器，尤其是`addEventListener`方法。我们需要为每个表头添加点击事件监听器。当用户点击表头时，触发相应的函数，该函数负责根据当前列进行排序。 以下是一个简单的...
点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加 3、排序的内容加 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", ...
要实现表头排序，我们首先需要在JavaScript中获取到表头单元格，然后绑定点击事件监听器。当用户点击表头时，事件处理器会触发排序逻辑。这个逻辑通常包括以下几个步骤： 1. **获取数据源**：确定表格数据的来源，...
要实现Jquery的表头排序，我们需要遵循以下步骤： 1. **选择表头元素**：使用Jquery的选择器选取所有的表头单元格（`<th>`）。例如，`$('table thead th')`可以获取表格中的所有表头。 2. **绑定点击事件**：为每...
以上就是实现“JS版表格排序实现点击表头即可排序”的基本步骤和技术要点。在实际开发中，还需要根据具体需求进行调整和优化，比如增加动画效果、处理复杂数据类型等。同时，也可以参考和学习现有的开源库，如...
该报表可以点击表头进行自动排序,JS实现，任意字符串和数字。
10. **框架与库**：许多前端框架和库（如jQuery、Bootstrap、Angular、Vue.js、React等）提供了现成的表格组件，它们通常包含了表头排序的功能，使用这些组件可以简化开发流程。 理解并熟练应用上述知识点，可以...
本文将深入探讨如何在Web中的`table`表格实现点击表头进行数据排序的功能，这是一个非常实用且常见于各种数据管理界面的功能。我们将主要关注`tablesorter`这个库，它是一个强大的JavaScript插件，用于实现这一功能...