具体代码如下：
引用js和css文件有：
复制代码 代码如下:
<link type="text/css" href="https://www.jb51.net/css/config.css">
<script type="text/javascript" src="https://www.jb51.net/js/config.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/skin.js"></script>
<script type="text/javascript" language="javascript" src="https://www.jb51.net/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="https://www.jb51.net/js/jquery.table.js"></script>
页面代码：
复制代码 代码如下:
<table bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" >
<thead>
<tr>
<td noWrap>选择</td>
<td noWrap>用户ID<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap>用户名称<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap>所在科室<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap>创建时间<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap>创建人<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap>菜单集名称<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap>是否有效<img src="https://www.jb51.net/images/up.png" style= "cursor:hand " alt="升序"><img src="https://www.jb51.net/images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
</tr>
</thead>
<tbody>
<c:forEach items="${userList}" var="smUser">
<tr bgcolor="#F9FDFF">
<td><input type="checkbox"></td>
<td>${smUser.userId }</td>
<td>${smUser.userName }</td>
<td>${smUser.organCode }</td>
<td>${smUser.createTime }</td>
<td>${smUser.creator }</td>
<td>${smUser.menusId }</td>
<td>${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实现表格分页打包
您可能感兴趣的文章: