具体代码如下：

引用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" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" >

<thead>

<tr>

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

<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>${smUser.userId }</td>

<td>${smUser.userName }</td>

<td>${smUser.organCode }</td>

<td>${smUser.createTime }</td>

<td>${smUser.creator }</td>

<td>${smUser.menusId }</td>

<td>${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实现表格分页打包