基于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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 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
PHP编程与应用
2006/10/09 PHP
php检测文本的编码
2015/07/26 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
对python中大文件的导入与导出方法详解
2018/12/28 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
小学教师自我鉴定
2013/11/07 职场文书
教学器材管理制度
2014/01/26 职场文书
高中军训第一天感言
2014/03/06 职场文书
家教广告词
2014/03/19 职场文书
授权委托书样本
2014/04/03 职场文书
厕所文明标语
2014/06/11 职场文书
商超业务员岗位职责
2015/02/13 职场文书
婚宴领导致辞
2015/07/28 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers