首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery表格分页

基于jquery实现的表格分页实现代码

2011-06-21 22:57:38 作者：

该方法的运用是从后台数据库中一次性取出所有的数据，运用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"); 
} 

运用jquery实现表格分页打包

基于jquery实现的表格分页实现代码

您可能感兴趣的文章: