<table id="tblSort" width="100%" border="0" cellspacing="1" cellpadding="2"
align="center" bordercolordark="#DFDFFF" bordercolorlight="#003366"
bgcolor="#B3C4DB">
<thead>
<tr class="lc2" bgcolor="#809cbc">
<td width="6%" height="18" align="center"></td>
<td width="5%" align="center"><a href="#" onClick="chooseAll()">全选</a></td>
<td width="10%" align="center" onclick="sortTable('tblSort',2)" style="cursor:pointer">编号</td>
<td width="30%" align="center">标题</td>
<td width="10%" align="center" onclick="sortTable('tblSort',4)" style="cursor:pointer">信件类别</td>
<td width="10%" align="center" onclick="sortTable('tblSort',5)" style="cursor:pointer">问题发生地</td>
<td width="10%" align="center" onclick="sortTable('tblSort',6)" style="cursor:pointer">初审情况</td>
<td width="11%" align="center" onclick="sortTable('tblSort',7)" style="cursor:pointer">到达时间</td>
</tr>
</thead>
<tbody>
<c:forEach var="letter" items="${requestScope.pm}">
<tr class="lc2" bgcolor="#EEF4FF"
onmouseover="this.bgColor='#EBEBEB';"
onmouseout="this.bgColor='#EEF4FF';">
<td width="6%" height="18" align="center"><img src="<%=path %>/images/lvdian.gif" width="16" height="15" title="正常办理"/></td>
<td width="5%" align="center"><input type="checkbox" name="allchecked3" id="allchecked3" value="${letter.processFlow.id}"></td>
<td width="10%" align="center">${ letter.identifier}</td>
<td width="33%" align="center"><a href="<%=path %>/jsp/process/chushen.do?method=checkupInput&petitionLetterId=${letter.id }">${ letter.letterInformation.title}</a></td>
<td width="10%" align="center">${ letter.letterInformation.letterCategory}</td>
<td width="9%" align="center">${ letter.letterInformation.province}</td>
<td width="10%" align="center">${ letter.processFlow.auditState}</td>
<td width="9%" align="center">${ letter.letterInformation.date}</td>
</tr>
</c:forEach>
</tbody>
<%
if(list.size()<8){
int j = 8-list.size();
for(int i=0;i<j;i++){
%>
<tr class="lc2" bgcolor="#EEF4FF"
onmouseover="this.bgColor='#EBEBEB';"
onmouseout="this.bgColor='#EEF4FF';">
<td width="6%" height="22" align="center"></td>
<td width="5%" align="center"></td>
<td width="10%" align="center"></td>
<td width="33%" align="center"></td>
<td width="10%" align="center"></td>
<td width="9%" align="center"></td>
<td width="10%" align="center"></td>
<td width="9%" align="center"></td>
</tr>
<%
}
}
%>
</table>
//转换器,将列的字段类型转换为可以排序的类型:String,int,float
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();
}
}
//排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
//排序方法
function sortTable(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];
}
//判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用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;
}
分享到:
相关推荐
最新项目要求实现前台排序,用原生的datatable.js总是不兼容,js控制絮乱;我们对其进行了重写,重写后可正常使用,配置按正常的配置就可以
jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行
GridView之精讲作品:可以前台排序,左右移动GridView中选中行的东西 在这里有讲解: http://blog.csdn.net/cefriend/archive/2008/04/07/2256732.aspx
基于Jquery的前台按表头排序table tr th
非常好用的基于Jquery的前台按表头排序
HkCms是一款免费开源内容...【新增】 新增模型字段支持前台排序选项 【新增】 新增插件、模板安装检测提示页 【新增】 支持手机模板绑定二级域名 【新增】 新增插件禁用时删除菜单 【新增】 TP 框架升级到 V6.0.12LTS
3.9.4 让EXT支持前台排序 52 3.10 后台排序 53 3.11 可编辑表格控件--EditorGrid 55 3.11.1 制作一个简单的EditorGrid 55 3.11.2 添加一行数据 56 3.11.3 保存修改结果 58 3.11.4 验证EditGrid中的数据 59 ...
本人在某宝花260元买的“ecshop分类页筛选属性自定义排序插件”,今日与同“ecshop商品详情页属性排序插件”一起奉上。 ECSHOP的分类列表页有一个“商品筛选”功能,可以...后台按什么顺序输入的,前台就按什么顺序排列
25、修复 修改职位后前台排序不变化问题 29、修复 职位开启审核后,修改职位后职位状态存在的问题 27、修复 管理员管理页面火狐浏览器无法详细设置权限问题 28、修复 个人会员注册页面中文名称无法注册问题 29、...
25、修复 修改职位后前台排序不变化问题 29、修复 职位开启审核后,修改职位后职位状态存在的问题 27、修复 管理员管理页面火狐浏览器无法详细设置权限问题 28、修复 个人会员注册页面中文名称无法注册问题 29、修复...
主要介绍了Java实现拖拽列表项的排序功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活,EditorGrid。 2.8.1. 旋动舞步,看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行,再把它踢掉 2.8.3. 一切就绪,你可以按保存按钮了。 2.8.4. 天马行空,保证提交...
JS中文拼音排序,通过js在前台进行中文数据的排序,简单易用
list集合树状排序 对于前端jquery-treetable无法进行父子关联数据问题进行改进,后台传list集合前,对list进行排序,然后在返回到前台。
前台表格排序,支持所有主流浏览器,简单易用
首字母排序选择_微信小程序模板js代码前台前端H5页面源码.rar
首字母排序选择_企业城微信小程序js代码前台前端H5页面源码.rar
通过脚本排序table 点击表头进行正序 倒序排列,识别字段是数值还是字符串 数值则按大小来了 字符串 则比较字符串 ,JS前台操作 最大限度减小服务端压力,使用简单,只需要在页面添加一条代码即可实现排序功能
XML分页排序数据岛 将后台绑定的数据源,绑定到属性,再通过xml绑定到前台
JS排序库 包括合并排序和插入排序。 如果您喜欢此仓库,请加注星标:) 合并排序 最坏情况下的大O符号: 空间:O(n) 时间:O(n log(n)) 插入排序 最坏情况下的大O符号: 空间:O(1) 时间(最差):O(n2...