基于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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
javascript定义函数的方法
Dec 06 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
js实现数组转换成json
Jun 26 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
vuex的使用步骤
Jan 06 Vue.js
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
聊天室php&amp;mysql(六)
2006/10/09 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python变量的存储原理详解
2019/07/10 Python
python gdal安装与简单使用
2019/08/01 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
应届毕业生自荐书
2014/06/18 职场文书
2014年宣传工作总结
2014/11/18 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
计算机实训心得体会
2016/01/14 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python