具体代码如下:
引用js和css文件有:
复制代码 代码如下:
<link ID="skin" rel="stylesheet" type="text/css" href="css/config.css">
<script type="text/javascript" src="/UploadFiles/2021-04-02/config.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/skin.js"><script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery.table.js">
页面代码:
复制代码 代码如下:
<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="/UploadFiles/2021-04-02/up.png"><td noWrap width="10%">用户名称<img src="images/up.png"><td noWrap width="10%">所在科室<img src="/UploadFiles/2021-04-02/up.png"><td width="10%" noWrap>创建时间<img src="images/up.png"><td width="10%" noWrap>创建人<img src="/UploadFiles/2021-04-02/up.png"><td width="10%" noWrap>菜单集名称<img src="images/up.png"><td width="10%" noWrap>是否有效<img src="/UploadFiles/2021-04-02/up.png"></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实现表格分页打包
引用js和css文件有:
复制代码 代码如下:
<link ID="skin" rel="stylesheet" type="text/css" href="css/config.css">
<script type="text/javascript" src="/UploadFiles/2021-04-02/config.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/skin.js"><script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery.table.js">
页面代码:
复制代码 代码如下:
<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="/UploadFiles/2021-04-02/up.png"><td noWrap width="10%">用户名称<img src="images/up.png"><td noWrap width="10%">所在科室<img src="/UploadFiles/2021-04-02/up.png"><td width="10%" noWrap>创建时间<img src="images/up.png"><td width="10%" noWrap>创建人<img src="/UploadFiles/2021-04-02/up.png"><td width="10%" noWrap>菜单集名称<img src="images/up.png"><td width="10%" noWrap>是否有效<img src="/UploadFiles/2021-04-02/up.png"></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实现表格分页打包
标签:
表格分页
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于jquery实现的表格分页实现代码”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 群星.1988-电视金曲巡礼【EMI百代】【WAV+CUE】
- 群星.1992-电视金曲巡礼VOL.2【EMI百代】【WAV+CUE】
- 廖昌永《情缘HQ》头版限量[低速原抓WAV+CUE]
- 蔡琴《老歌》头版限量编号MQA-24K金碟[低速原抓WAV+CUE]
- 李嘉《国语转调》3CD[WAV+CUE]
- 谭咏麟《爱的根源 MQA-UHQCD》2022头版限量编号 [WAV+CUE][1G]
- 江洋 《江洋原创琵琶作品专辑》[320K/MP3][118.08MB]
- 江洋 《江洋原创琵琶作品专辑》[FLAC/分轨][228.33MB]
- 《战舰世界》语音包文件夹位置介绍
- 《CSGO》送好友皮肤方法介绍
- 《山羊模拟器重制版》发售平台说明
- 刘德华2002-美丽的一天[香港首批大包装首版][WAV]
- 刘文正《金装刘文正不朽经典金曲》2CD(1995环星)][WAV+CUE]
- 周慧敏《94美的化身演唱会》宝丽金1995港版2CD[WAV+CUE]
- 娃娃.1997-精选180绝版冠军精丫滚石】【WAV+CUE】