<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,支持纯前台排序"这个项目聚焦于解决原生Datatable.js库在实现前台排序时遇到的兼容性和控制混乱问题。Datatable.js是一款广泛使用的JavaScript插件,用于创建动态、交互式的HTML表格,但随着项目...
**jQuery Flexigrid 前台排序实现详解** 在Web开发中,数据展示是一个重要的环节,而表格作为数据展示的常见形式,其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件,它提供了丰富的自定义选项和操作...
GridView之精讲作品:可以前台排序,左右移动GridView中选中行的东西 在这里有讲解: http://blog.csdn.net/cefriend/archive/2008/04/07/2256732.aspx
"基于Jquery的前台按表头排序"是一种实现方式,它允许用户通过点击表格的列头来对数据进行升序或降序排序,而无需向服务器发送额外的请求。这种方式提高了页面的交互性和响应速度,尤其在数据量不大的情况下非常实用...
在网页开发中,数据展示通常会使用到表格(table)元素,而为了提供更好的用户体验,我们经常需要实现表格数据的动态排序功能。本教程将详细讲解如何使用Jquery库实现前端表格(table)按表头(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 ...
此外,还增加了表头的前台排序功能,便于快速整理数据。 在报表工具(分析表)-自由报表部分,V56引入了多项优化。例如,支持图表设置,用户可以自定义各种图表类型,包括直方图、饼图、折线图、仪表图等。这些图表...
本人在某宝花260元买的“ecshop分类页筛选属性自定义排序插件”,今日与同“ecshop商品详情页属性排序插件”一起奉上。 ECSHOP的分类列表页有一个“商品筛选”功能,可以...后台按什么顺序输入的,前台就按什么顺序排列
25、修复 修改职位后前台排序不变化问题 29、修复 职位开启审核后,修改职位后职位状态存在的问题 27、修复 管理员管理页面火狐浏览器无法详细设置权限问题 28、修复 个人会员注册页面中文名称无法注册问题 29、...
25、修复 修改职位后前台排序不变化问题 29、修复 职位开启审核后,修改职位后职位状态存在的问题 27、修复 管理员管理页面火狐浏览器无法详细设置权限问题 28、修复 个人会员注册页面中文名称无法注册问题 29、修复...
们需要在后端处理拖拽事件,...理解这些原理后,无论是JavaFX还是Swing,甚至是其他平台的UI框架,都能灵活地实现拖拽排序功能。通过这个功能,我们可以提高用户的交互体验,让他们能更直观、便捷地调整列表项的顺序。
2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活,EditorGrid。 2.8.1. 旋动舞步,看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行,再把它踢掉 2.8.3. 一切就绪,你可以按保存按钮了。 2.8.4. 天马行空,保证提交...
前台代码定义了一个`GridView`控件,允许用户对其进行排序操作,并设置了三列:`name`、`age` 和 `sex`。其中`name`和`age`列可以进行排序。 ```html AllowSorting="True" OnSorting="Sorting"> ``` ...
4. **数据排序和过滤**:如果需要在前台进行数据排序或过滤,要确保这些操作不会影响到整个数据集,只对当前页的数据进行操作。 5. **状态保存**:如果应用有多个视图或用户离开后再返回,需要保存用户的分页状态,...
总的来说,这个"首字母排序选择_微信小程序模板js代码前台前端H5页面源码"是一个实用的工具,对于想要学习微信小程序开发、前端编程以及用户界面设计的开发者来说,它提供了丰富的学习材料。通过研究和实践,你可以...
《BIEE前台展现入门必备》一文深入探讨了Oracle Business Intelligence(BI)Presentation Services的管理与应用,为初学者提供了全面的指南。本文将基于标题、描述以及部分提供的内容,详细阐述BIEE(Oracle ...
5. 验证前台效果,确保排序功能正常运行。 总的来说,【ECSHOP模板堂官方】商品分类销量排序插件是一款为ECSHOP店主提供便利的工具,通过简单地添加排序功能,就能显著提升网站的用户体验和商业价值。对于那些希望...
关键算法是实现系统核心功能的关键步骤,例如帖子排序算法、用户权限验证算法等。 #### 十五、故障检测和触发 故障检测是指系统能够自动检测出潜在的错误或异常情况,并采取相应的措施,如记录日志、发送警告等。 ...
通过脚本排序table 点击表头进行正序 倒序排列,识别字段是数值还是字符串 数值则按大小来了 字符串 则比较字符串 ,JS前台操作 最大限度减小服务端压力,使用简单,只需要在页面添加一条代码即可实现排序功能