基于jquery实现的表格分页实现代码


Posted in Javascript onJune 21, 2011

具体代码如下:
引用js和css文件有:

<link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"> 
<script type="text/javascript" src="js/config.js"></script> 
<script type="text/javascript" src="js/skin.js"></script> 
<script type="text/javascript" language="javascript" src="js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="js/jquery.table.js"></script>

页面代码:
<table id="userTable" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;" > 
<thead> 
<tr class="fixheader"> 
<td noWrap width="5%">选择</td> 
<td noWrap width="10%">用户ID<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
<td noWrap width="10%">用户名称<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
<td noWrap width="10%">所在科室<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
<td width="10%" noWrap>创建时间<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
<td width="10%" noWrap>创建人<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
<td width="10%" noWrap>菜单集名称<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
<td width="10%" noWrap>是否有效<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td> 
</tr> 
</thead> 
<tbody style="display:"> 
<c:forEach items="${userList}" var="smUser"> 
<tr height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;"> 
<td align="center"><input type="checkbox"></td> 
<td class="tdc">${smUser.userId }</td> 
<td class="tdc">${smUser.userName }</td> 
<td class="tdc">${smUser.organCode }</td> 
<td class="tdc">${smUser.createTime }</td> 
<td class="tdc">${smUser.creator }</td> 
<td class="tdc">${smUser.menusId }</td> 
<td class="tdc">${smUser.valid }</td> 
</tr> 
</c:forEach> 
</tbody> 
</table> 
<script language="javascript" type="text/javascript"> 
$("#userTable").tablePaging(); 
</script>

此处要特别注意的是要讲table的表头加上<thread></thread>标签,且注意此处的table的id为userTable,这个在后面Js文件的引用中十分重要,一句$("#userTable").tablePaging();会去执行jquery.table.js中的代码。
后台action的代码如下:
public ActionForward listUser(ActionMapping mapping, ActionForm form, 
HttpServletRequest request, HttpServletResponse response){ 
List<POJO> pojos = serviceSmUserImpl.findAll(); 
List<SmUser> smUserList = new ArrayList<SmUser>(); 
for(POJO pojo:pojos){ 
smUserList.add((SmUser)pojo); 
} 
request.setAttribute("userList",smUserList); 
return mapping.findForward("smUserList"); 
}

运用jquery实现表格分页打包
Javascript 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
CCPry JS类库 代码
Oct 30 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
jquery异步请求实例代码
Jun 21 #Javascript
读jQuery之九 一些瑕疵说明
Jun 21 #Javascript
读jQuery之八 包装事件对象
Jun 21 #Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 #Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 #Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 #Javascript
读jQuery之五(取DOM元素)
Jun 20 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
MySql中正则表达式的使用方法描述
2008/07/30 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
python基础教程之Hello World!
2014/08/29 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python如何运行js语句
2020/09/09 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
高中班级口号
2014/06/09 职场文书
禁止酒驾标语
2014/06/25 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
老人与海读书笔记
2015/06/26 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js