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

详情请从以下链接中下载文件：http://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

转载于:https://www.cnblogs.com/xiangpiaopiao2011/archive/2011/06/16/2083065.html