具体代码如下： 引用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实现表格分页打包

　　推荐阅读

　　读jQuery之四（优雅的迭代）

jQuery的操作往往是分两步 1，获取元素集合(选择器) 2，操作元素集合 而第二步操作元素集合的主要方法就是jQuery.each。查看源码，我们发现jQuery.each及this.each分别调用了27次和31次。可见它是多么的重要。 这篇>>>详细阅读

本文标题：基于jquery实现的表格分页实现代码

地址：http://www.17bianji.com/kaifa2/JS/24482.html

 1/2    1