时间:2021-05-25
具体代码如下:
引用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实现表格分页打包
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先看下实现效果图,如果觉得还不错,请参考实现代码。上面数据下面分页使用方法1导入bootstrap的css2导入jquery3导入表格分页插件lTable.j
本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下效果图:具体代码:面向对象的无刷新表格分页vardata=[];for(
以下是实现代码(基于jquery):复制代码代码如下:functionlazyload(option){varsettings={defObj:null,def
本文实例为大家分享了JQuery的Pager分页器的具体实现代码,供大家参考,具体内容如下效果图:代码:html代码:分页器functiondoChangePa
本文实例为大家分享了jquery.pager.js分页实现代码,供大家参考,具体内容如下jquery.pager.js:/**jQuerypagerplugin