Implementation of _jquery based on jquery in table paging implementation code

The specific code is as follows:
References to JS and CSS files are:

Copy Code code as follows:

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

Page code:

Copy Code code as follows:

<table id= "usertable" align= "center" class= "listtable" width= "100%" bgcolor= "#CCCCCC" cellspacing= "1" cellpadding= "1" style= "margin-top:5px;" >
<thead>
<tr class= "Fixheader" >
&LT;TD noWrap width= "5%" > Selection </td>
&LT;TD noWrap width= "10%" > User id< IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" align= "Absmiddle" ></td>
&LT;TD noWrap width= "10%" > User name < IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" align= "Absmiddle" ></td>
&LT;TD noWrap width= "10%" > Department < IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" align= "Absmiddle" ></td>
&LT;TD width= "10%" nowrap> creation time < IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" align= "Absmiddle" ></td>
&LT;TD width= "10%" nowrap> creator < IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" align= "Absmiddle" ></td>
&LT;TD width= "10%" nowrap> menu set name < IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" align= "Absmiddle" ></td>
&LT;TD width= "10%" nowrap> valid < IMG src= "images/down.png" style= "Cursor:hand" alt= "Descending" 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; " >
&LT;TD align= "center" ><input type= "checkbox" ></td>
&LT;TD class= "TDC" >${smuser.userid}</td>
&LT;TD class= "TDC" >${smuser.username}</td>
&LT;TD class= "TDC" >${smuser.organcode}</td>
&LT;TD class= "TDC" >${smuser.createtime}</td>
&LT;TD class= "TDC" >${smuser.creator}</td>
&LT;TD class= "TDC" >${smuser.menusid}</td>
&LT;TD class= "TDC" >${smuser.valid}</td>
</tr>
</c:forEach>
</tbody>
</table>
<script language= "javascript" type= "Text/javascript" >
$ ("#userTable"). Tablepaging ();
</script>

Special attention here is to the table header plus <thread></thread> tag, and note that here's the ID of the table is usertable, this is in the later JS file reference is very important, a sentence of $ ("# Usertable "). Tablepaging (); The code in Jquery.table.js is executed.
The code for the background action is as follows:

Copy Code code as follows:

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

Using jquery to implement form paging packaging