Table 列排序

最新推荐文章于 2024-07-15 13:17:25 发布
最新推荐文章于 2024-07-15 13:17:25 发布
阅读量611 收藏
点赞数
文章标签： table function border xhtml javascript url

<!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>Table   列排序</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>
<script language="javascript">

 //Author    :   狼Robot
//Contact   :   robot@k2046.cn
//Date      :   2008-04-19
//Explain   :   使Table可以点击排序.
/*使用说明  :
方法1:
new TableSorter("tb1");
效果:
id为tb1的table的第一行任意单元格都可以点击进行排序.
方法2:
new TableSorter("tb1", 0, 1, 3);
效果:
id为tb1的table的第一行0,1,3单元格可以进行点击排 序.
*/
function TableSorter(table)
{
this.Table = this.$(table);
if(this.Table.rows.length <= 1)
{
return;
}
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;
}
if(args.length > 1)
{
for(var x = 1; x < args.length; x++)
{
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";
}
}
}
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)
{
return function()
{
variable[method](param);
}
}
// 执行排序.
TableSorter.prototype.Sort = function(col)
{
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];
SortAsNumber = SortAsNumber && this.IsNumeric(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;
}
}
}
}
else
{
Sorter.sort();
}
if(this.ViewState[col])
{
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]]);
}
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];
}
}
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;
}


</script>
</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">
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>
</body>
</html>

hwcIT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对Table进行排序 (可指定排序方式)
横行青海夜带刀
12-09 1975
在日常的WEB开发中，对表格的排序经常会用到，于是在网上找了些资料，然后自己下来研究了下，做了一些整理，现在将他贴出来，一来备忘，二来可以帮助其他需要的人。   需要注意的地方： 关于table中按行按列排序的方法： 1. 取出每一行作为排序的单元，结果即为完整的正确的排序。 2. 每一行中有一个关键字用于排序的标准 2.1 每一个关键字都有类型的区别，如string, int, date,...
Tableau排序
kejiayuan0806的博客
08-17 3151
在可视化分析时，一般会通过排序对数据进行初步了解，已查看数据分布、数值范围以及是否存在异常值等。 Tableau支持多种排序方式：按字母、按字段、手动和数据源顺序升序或降序。 将“子类别”和“销售额”分别拖放至行列功能区，在生成的水平条形图中，通过排序观察各子类别产品的销售额。 坐标轴排序 在视图中点击横纵轴标签的排序按钮，可直接对视图进行排序。 点击数值标签，可按数值大小进行排序。 点击分类...
table 按列进行排序
zhangj1012003_2007的专栏
08-24 7686
行业对比--价值分析比较 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font:12px "宋体"; } a:link { f
css表格字段排序_使用CSS3增强必填表格字段
culiao9310的博客
09-28 298
css表格字段排序View demo 查看演示Download Source 下载源Today I want to share a little subtle effect with you: enhancing required fields in a form. Many web forms are designed in a minimal way, ...
【elementUI系列三】el-table多列排序（后端排序）、重置后清除排序
qq_37485170的博客
10-31 3669
业务需求el-table需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列（一个字段）排序。点击一列排序，另一列排序自动消失一、解决方案想要支持多列排序，首先要定义一个数组，用于存放所有排序的字段及其顺序，设置列sortable=“custom”，结合sort-change事件header-cell-class-name属性，在点击排序箭头时进行排序操作。
elementUI el-table表格列排序的三种方法
热门推荐
编写博客，学习交流
07-01 4万+
1. 官方排序 <el-table-column sortable prop="test" label="测试" align="center"> 2.sort-method：属性 这个属性接收一个方法作为排序依据，和Array.sort()表现一致。 // 如果升序排序则 Array.sort(function(a, b) { return a - b }) // 如果降序排序则 Array.sort(function(a, b) { return b - a }) 如果是
antd table 排序
xiaohong的博客
05-17 1万+
1，效果图如下 2，代码如下 @Form.create() class StudentsList extends PureComponent { state = { eAdd:"", eEdit:"", eDestroy:"", filteredInfo: null, sortedInfo: null, pageQuery:'', }...
html table列自定义排序排序
05-18
table table自定义列排序；目前支持数值排序，文本（支持中文）排序； 示例： var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);
vue +el + Sortable table列拖拽排序
05-19
vue table 列拖拽排序例子
Angular实现的table表格排序功能完整示例
10-18
在AngularJS中，实现table表格排序功能是一项常见的需求，它涉及到事件监听、数据处理和DOM操作。本示例将详细讲解如何在AngularJS环境中构建一个具备排序功能的表格。 首先，我们创建一个AngularJS应用模块，并...
jquery实现的table排序功能示例
10-20
在本示例中，我们将探讨如何使用jQuery实现表格（table）的排序功能。这个功能涉及到对HTML元素的操作、鼠标事件监听以及数据的动态处理。首先，我们来看一下HTML结构，这里使用了一个基本的表格布局： ```html <!...
BootStrap Table 后台数据绑定、特殊列处理、排序功能
01-21
本节主要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序功能 1.数据绑定  一般做程序设计，很少是使用json文件直接绑定数据。基本上我们都是使用编程语言进行数据获取，并做数据绑定。 放置一个Table控件 ...
Table sort,html table 列排序
im_sk的窝
01-31 3773
/* By Sk 2013.01.30*/ var tableSort = function () { this.initialize.apply(this, arguments); } tableSort.prototype = { initialize: function (tableId, clickRow, startRow, endRow, classUp, clas
CSS- table 序列号自动排序
小白
03-15 3406
HTML: &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;序号&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="SortCLASS"&
如何更改表中的列顺序
二货
11-12 5559
首先，请考虑是否的确需要更改表中的列顺序。SQL的核心要点是从数据存储格式获取应用。总应指定检索数据的顺序。 在下面的第1条语句中，以col_name1、col_name2、col_name3顺序返回列； 在第2条语句中， 以col_name1、col_name3、col_name2顺序返回列：mysql> SELECT col_name1, col_name2, col_name3 FRO
table列排序以及鼠标移动到行动态框显示行信息
不善言谈者
05-09 605
对于table的排序,有两种做法,一种是与后台交互,重新取数据,一种是直接在前端进行排序.至于选用两种方法,具体问题具体分析.根据自身面对的业务来选取 本文只演示了前端排序的方式,至于后端主要是sql语句问题. 思路:思路其实不复杂,简单来说,就是将所有的数据放到对应的数组(容器)中,然后对要进行排序的列进行排序(升序或降序),将排好的数组和原数组对比,如果值相等,取其它列对应数组中对应index的值,填到对应的行中. 这种排序,也可以使用现成的工具类,不过我是从网上找了一个手动实现的,直接拿来进行修改和使
Table表格按照其中某一列进行递增正排序
honor12的博客
12-06 1132
信息 1、按照页面的某一列进行排序； 2、表格还可以添加信息； 3、表格的行数和列数也不尽然相同，尽量引入jQuery； 页面 页面html代码如下： 这个只是table表的代码，其余代码自己补全就行。 <table id="returnFilterTab" class="table table-bordered"> <thead> <tr...
HTML的文档类型与字符集＜!DOCTYPE html＞
最新发布
m0_65696193的博客
07-15 208
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">我们使用的是 html 5 的版本。
antd Table列排序
05-22
antd Table组件提供了很方便的列排序功能，可以通过设置`sorter`属性来实现。 首先在表头列中设置`sorter`属性为一个对象，对象中包含两个属性：`compare`和`multiple`。 `compare`属性是一个比较函数，接收两个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值