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

　　<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>

　　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");

　　}