js代码:

     /**
* 通过表头对表列进行排序
*
* @param sTableID
* 要处理的表ID<table id=''>
* @param iCol
* 字段列id eg: 0 1 2 3 ...
* @param sDataType
* 该字段数据类型 int,float,date 缺省情况下当字符串处理
*/
function orderByName(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for ( var i = 0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for ( var j = 0; j < aTRs.length; j++) {
oFragment.appendChild(aTRs[j]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
} /**
* 处理排序的字段类型
*
* @param sValue
* 字段值 默认为字符类型即比较ASCII码
* @param sDataType
* 字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)
* @return
*/
function convert(sValue, sDataType) {
switch (sDataType) {
case "int" :
return parseInt(sValue);
case "float" :
return parseFloat(sValue);
case "date" :
return new Date(Date.parse(sValue));
default :
return sValue.toString();
}
} /**
* 比较函数生成器
*
* @param iCol
* 数据行数
* @param sDataType
* 该行的数据类型
* @return
*/
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}

在table表中需要排序的列头添加事件,调用orderByName(sTableID, iCol, sDataType)即可.

三个参数第一个是表的id,第二个参数是第几列,第三个参数是类型,不写即为字符型.

注意列头如果不参与排序,放在另一个table中即可.

jsp部分示例代码:

              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="import_tab" align="center">
<tbody>
<tr>
<td width="11%" class="borderTh" title="查询名称为空即其没有查询结果">名称(查询)</td>
<td width="6%" class="borderTh" title="经营状态为空表示其没有查询结果">经营状态</td>
<td width="11%" class="borderTh" title="点击可排序;Ctrl+F查找" onclick="orderByName('resultTab',2);">名称(所填企业名)</td>
<td width="10%" class="borderTh" >统一社会信用代码</td>
<td width="7%" class="borderTh" title="点击可排序" onclick="orderByName('resultTab',4,Date);">申请日期</td>
</tr>
</tbody>
</table>
<table id="resultTab" width="100%" border="0" cellpadding="0" cellspacing="0" class="import_tab" align="center">
<tbody>
<c:forEach items="${listItems}" var="wgl" varStatus="num">
<tr>
<td width="11%" class="borderTh" >${wgl.entname}</td>
<td width="6%" class="borderTh">${wgl.entstatus}</td>
<td width="11%" class="borderTh">${wgl.userName}</td>
<td width="10%" class="borderTh">${wgl.appCertificateNum}</td>
<td width="7%" class="borderTh"><fmt:formatDate value="${wgl.appDate}" type="date" dateStyle="long" /></td>
</tr>
</c:forEach>
</tbody>
</table>

如 日期排序的效果,再点击即可转换顺序排序展示

非常强大的table根据表头排序,点击表头名称,对其内容排序的更多相关文章

  1. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  2. JS实现点击表头表格自动排序(含数字、字符串、日期)

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  3. QT中Qtableview视图表格中点击表头进行排序

    用QT写了一个小工具,主要是对Excel中大量的数据进行计算和显示. 写了有一段时间,然后断断续续的做一些修改和完善. 因为要显示的数据有多列,很自然的会想到要能够对显示的数据进行排序.如果直接操作m ...

  4. CList 点击表头排序 (3)两种排序的第二种

    在头两篇中介绍了CListCtrl::SortItems() 方法的使用和其中的一个排序方法,这篇介绍另一种方法 CList 点击表头排序 (1)SortItems函数 CList 点击表头排序 (2 ...

  5. CList 点击表头排序 (2)两种排序方法中其中一种

    上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...

  6. CList 点击表头排序 (1)SortItems函数

    点击表头排序整体的思路都是去 CListCtrl类中的方法SortItems去实现 CListCtrl::SortItems的原型是: BOOL SortItems( PFNLVCOMPARE pfn ...

  7. easyui datagrid 点击表头的事件

    在用datagrid的时候我们可能要用到点击表头来触发一个function,这里有个简单的例子. 首先你得有个能用的datagrid. <div>    <table id=&quo ...

  8. hashmap先按照value从大到小排序,value相等时按照key从小到大排序

    hashmap先按照value从大到小排序,value相等时按照key从小到大排序. [2]是从小到大排序,在[2]代码基础上交换o1,o2位置即可. 代码中用到[1]中提到的在value相等时再比较 ...

  9. 页面内容排序插件jSort的使用

        当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序.本文将使用排序插件jSort来对页面内容进行排序. jSort插件可以对页面任何内容进行排序(ta ...

随机推荐

  1. aps.net cored 新概念

    Tag Helpers The EnvironmentTagHelper can be used to include different scripts in your views (for exa ...

  2. AT指令(中文详解版)(一)

    一 . 一 般 命 令1.AT+CGMI      给出模块厂商的标识.2.AT+CGMM    获得模块标识.这个命令用来得到支持的频带(GSM 900,DCS 1800    或PCS 1900) ...

  3. oracle 大表 迅速 导出(使用命令行)

    导出: exp dbname/dbpwd@orclname file=c:\xxx.dmp tables=(tablename) 导入:imp ross_delivery/123456@orcl fi ...

  4. xp系统重绘边框线不显示(首次加载没有触发paint事件)

    同样是,重绘边框事件,win7系统显示正常,而xp系统却不显示,这是什么原因造成的呢? 于是,小编开始百度,不停的查找原因,通过一番查找,小编也意外的收获了一些内容: 例如:窗口的拖动,放大,缩小,等 ...

  5. Cenos7 编译安装 Mariadb Nginx PHP Memcache ZendOpcache (实测 笔记 Centos 7.0 + Mariadb 10.0.15 + Nginx 1.6.2 + PHP 5.5.19)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...

  6. 利用box-shadow绘图

    上篇博客提到过,box-shadow属性的本质是对形状的复制,那么如果我设置一个1*1px的i标签,利用box-shadow可以叠加的特性,给每一个1*1px的阴影赋上颜色,那么最后不就是一幅图片了么 ...

  7. MySQL Replication需要注意的问题

    MySQL Replication 大家都非常熟悉了,我也不会写怎么搭建以及复制的原理,网上相关文章非常多,大家可以自己去搜寻.我在这里就是想总结一下mysql主从复制需要注意的地方.有人说主从复制很 ...

  8. 第一章-第一题(小学生四则运算)--By郭青云

    1.项目需求 a) 除了整数以外,还要支持真分数的四则运算. (例如:  1/6 + 1/8 = 7/24) b) 让程序能接受用户输入答案,并判定对错. 最后给出总共 对/错 的数量. c) 逐步扩 ...

  9. win7下wndows virtual pc 2007 装xp比新版本的 Windows virtual pc 好用

    2007下装xp虚拟机启动快,支持拖放.

  10. Python强化训练笔记(七)——使用deque队列以及将对象保存为文件

    collections模块中的deque对象是一个队列,它有着正常队列的先进先出原则.我们可以利用这个对象来实现数据的保存功能. 例如,现有一个猜数字大小的游戏,系统开始会随机roll点一个0-100 ...