The Code is as follows:
Reference js and css files include:
Copy codeThe Code is 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 codeThe Code is 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">
<Td noWrap width = "5%"> select </td>
<Td noWrap width = "10%"> User ID </td>
<Td noWrap width = "10%"> User Name </td>
<Td noWrap width = "10%"> Department </td>
<Td width = "10%" noWrap> creation time </td>
<Td width = "10%" noWrap> created by </td>
<Td width = "10%" noWrap> menu set name </td>
<Td width = "10%" noWrap> valid </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>
Note that the <thread> </thread> label is added to the table header, and the table id here is userTable, this is very important in the reference of the following Js file, a sentence $ ("# userTable "). tablePaging (); executes jquery. table. js Code.
The code for the background action is as follows:
Copy codeThe Code is 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 pack tables by PAGE