运用jquery实现表格分页

该方法的运用是从后台数据库中一次性取出所有的数据，运用Jquery把一部分数据隐藏起来，事实上数据还是全部在html页面中，具体代码如下：

引用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");
    }

详情请从以下链接中下载文件：https://files.cnblogs.com/xiangpiaopiao2011/%E8%BF%90%E7%94%A8jquery%E5%AE%9E%E7%8E%B0%E8%A1%A8%E6%A0%BC%E5%88%86%E9%A1%B5.rar