Table 列排序

最新推荐文章于 2023-10-31 14:35:26 发布
转载 最新推荐文章于 2023-10-31 14:35:26 发布 · 679 阅读 · 0
文章标签：

#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
关注
精选资源
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将详细阐述这些功能的实现方法。 首先，**无限滚动**是提高用户体验的一种常见技术，特别是在处理大量数据...
精选资源
BootStrap Table 后台数据绑定、特殊列处理、排序功能
01-21
本节主要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序功能 1.数据绑定  一般做程序设计，很少是使用json文件直接绑定数据。基本上我们都是使用编程语言进行数据获取，并做数据绑定。 放置一个Table控件 ...
html table列自定义排序排序
05-18
table table自定义列排序；目前支持数值排序，文本（支持中文）排序； 示例： var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);
Table 列排序
海盗的成长
09-23 1947
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >Table   列排序body{font-size:12px;line-height:25px;}tr{height:25px;}th{font-size:14px;border-bottom:solid 1px #DDDD
简单的table列头排序
yiyioo的专栏
04-10 1911
以前看到obj.swapNode(obj1)这个函数的时候,心就痒痒的,觉得用这个来做table的列头排序蛮好,跟冒泡排序法类似,今天工作效率又不高,所以就写了下面这个列头排序.因为写得很随意,所以有点乱,参数也很乱,哈哈,改天有兴致再整理,完善.http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.o
table 按列进行排序
zhangj1012003_2007的专栏
08-24 7755
行业对比--价值分析比较 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font:12px "宋体"; } a:link { f
Jtable 表格按多列排序（支持中文汉字排序）
weixin_30872157的博客
12-25 516
　　这两天公司让做一个Jtable表格的排序，首先按A列排序，在A列相等时按B列排序，B列相等时按C列排序，ABC三列可以任意指定，最多分三列，这样的一个需求。由于我是大神，所以必须做了出来。ok，不自恋了，先上效果图，然后上代码，最后上项目。这也将是我以后的一贯风格，懂得分享才能走的更高！ 　　简单描述一下，瞅准某列，第一次点击升序，第二次点击降序，第三次点击取消排序。图为先按密码升...
table列排序、列拖动、列宽度变化、行交换
12-20
"table列排序、列拖动、列宽度变化、行交换"这些功能是网页数据展示中常见的需求，能够极大地提升用户操作的便捷性和数据管理的有效性。下面我们将详细探讨这些知识点。 首先，**表头列排序**是一种常见于数据表格...
【elementUI系列三】el-table多列排序（后端排序）、重置后清除排序
qq_37485170的博客
10-31 5583
业务需求el-table需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列（一个字段）排序。点击一列排序，另一列排序自动消失一、解决方案想要支持多列排序，首先要定义一个数组，用于存放所有排序的字段及其顺序，设置列sortable=“custom”，结合sort-change事件header-cell-class-name属性，在点击排序箭头时进行排序操作。
table列排序以及鼠标移动到行动态框显示行信息
不善言谈者
05-09 690
对于table的排序,有两种做法,一种是与后台交互,重新取数据,一种是直接在前端进行排序.至于选用两种方法,具体问题具体分析.根据自身面对的业务来选取 本文只演示了前端排序的方式,至于后端主要是sql语句问题. 思路:思路其实不复杂,简单来说,就是将所有的数据放到对应的数组(容器)中,然后对要进行排序的列进行排序(升序或降序),将排好的数组和原数组对比,如果值相等,取其它列对应数组中对应index的值,填到对应的行中. 这种排序,也可以使用现成的工具类,不过我是从网上找了一个手动实现的,直接拿来进行修改和使
对table列表按某一列进行排序
claymore1114的专栏
05-12 2184
<br /><table border="1"> <tr><td>姓名</td><td>年龄</td><td>性别</td></tr> <tr><td>张三</td><td>12</td><td>男</td></tr> <tr><td>李四</td><td>23</td><td>女</td></tr> <tr><td>王五</td><td>56</td><td>男</td></tr> <tr><td>赵六</td><td>59</td><td>女</td></tr> <tr><td>小红</td
根据table的不同列排序
Sherry's Blog
07-23 569
function sort(type, order) { var table_tbody=document.getElementsByTagName("tbody")[0]; var table_tr = table_tbody.getElementsByTagName("tr"); var tempArr = []; var temp_tr_ar...
js实现table表列的排序
Jason~小杰的学习之家
07-23 415
声明：本例子根据《JavaScript高级程序设计》（作者 Nicholas C.Zakas）该书第12章进行改写,主要是把表列排列的属性和方法封装到了一个对象中去 下载地址：http://download.csdn.net/source/1511936
Table表格按照其中某一列进行递增正排序
honor12的博客
12-06 1243
信息 1、按照页面的某一列进行排序； 2、表格还可以添加信息； 3、表格的行数和列数也不尽然相同，尽量引入jQuery； 页面 页面html代码如下： 这个只是table表的代码，其余代码自己补全就行。 <table id="returnFilterTab" class="table table-bordered"> <thead> <tr...
php table字段排序,jquery实现table排序功能实例分享
weixin_28745525的博客
03-24 189
本文主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下，希望能帮助到大家。Documentp{width: 1024px;margin: 0 auto; /*p相对屏幕左右居中*/}table{border: solid 1px #666;border-collapse: collapse;width: 100%;...
点击图标实现table数据的排序
jixiangqidemingzi的博客
11-29 1678
我们在很多时候会用到对数据的排序，但是如果当点击图标后从数据库来重新排序的话，当数据量过大的时候会给数据库很大的压力。所以使用tablesort来更新排序。首先导入jquery.tablesorter.js和css。要注意的是在css中要修改图标的位置，因为你图片存放位置不一定一样。并且需要注意的是：一定要给table加thead属性，不然实现不了
Table sort,html table 列排序
im_sk的窝
01-31 3857
/* By Sk 2013.01.30*/ var tableSort = function () { this.initialize.apply(this, arguments); } tableSort.prototype = { initialize: function (tableId, clickRow, startRow, endRow, classUp, clas
element-ui table 多列表头组合排序
qq_41329287的博客
07-06 1178
2.监听header-cell-class-name事件，在该事件中修正表头排序图标的样式。保证图标的样式和缓存的数据一致。1.监听sort-change事件，在该事件中缓存排序规则。
jquery插件tablesorter自动排序
爱兰河少
12-05 6316
在行业系统的开发中，数据的排序是免不了的，在c/s开发中，数据的排序比较简单，而在b/s的开发中，通常排序是靠与服务端交互来完成，每一次排序都需要提起一次数据。这样很麻烦，而且对数据库的压力也很大。 现在我们使用jquery插件tablesorter来完成静态排序，大大减轻了数据库的压力。 它的使用方法很简单。 Html 代码  type="text/javascript" src=
el-table 列排序
最新发布
09-24
在 ElementUI 的 `el-table` 中，实现列排序有多种方法，以下为详细介绍及示例代码。 ### 方法一：使用内置排序功能 `el-table` 提供了内置的排序功能，只需在 `el-table-column` 中设置 `sortable` 属性为 `true` 即可。 ```vue <template> <el-table :data="tableData"> <el-table-column label="项目编号" prop="id" :sortable="true"></el-table-column> <el-table-column label="项目名称" prop="name" :sortable="true"></el-table-column> <el-table-column label="赏金" prop="price" :sortable="true"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '项目A', price: 100 }, { id: 2, name: '项目B', price: 200 }, { id: 3, name: '项目C', price: 150 } ] }; } }; </script> ``` 在这个示例中，`id`、`name` 和 `price` 列都启用了排序功能，用户点击列标题即可对该列数据进行升序或降序排序。 ### 方法二：自定义排序方法 当内置排序无法满足需求时，可自定义排序方法。通过在 `el-table-column` 中设置 `sort-method` 属性来指定自定义排序函数。 ```vue <template> <el-table :data="tableData"> <el-table-column label="到期时间" :sortable="true" :sort-method="sortByDate"> <template slot-scope="scope">{{ scope.row.deadline }}</template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { deadline: '2024-01-01' }, { deadline: '2024-02-01' }, { deadline: '2023-12-01' } ] }; }, methods: { sortByDate(a, b) { return new Date(a.deadline) - new Date(b.deadline); } } }; </script> ``` 在这个示例中，`sortByDate` 函数用于对 `deadline` 列进行排序，它将日期字符串转换为 `Date` 对象后进行比较。 ### 方法三：远程排序 如果数据量较大，可采用远程排序。通过设置 `sort-change` 事件，在事件处理函数中向服务器发送请求获取排序后的数据。 ```vue <template> <el-table :data="tableData" @sort-change="handleSortChange"> <el-table-column label="项目编号" prop="id" :sortable="true"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [], sortProp: null, sortOrder: null }; }, methods: { handleSortChange({ column, prop, order }) { this.sortProp = prop; this.sortOrder = order; // 模拟发送请求获取排序后的数据 this.fetchData(); }, fetchData() { // 这里应替换为实际的请求代码 console.log(`请求参数：prop=${this.sortProp}, order=${this.sortOrder}`); // 假设请求成功后更新 tableData this.tableData = [ { id: 1 }, { id: 2 }, { id: 3 } ]; } } }; </script> ``` 在这个示例中，当用户点击列标题进行排序时，`handleSortChange` 函数会被触发，它记录排序的属性和顺序，并调用 `fetchData` 函数向服务器发送请求获取排序后的数据。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值