Flexigrid is a jquery table Plugin: http://download.csdn.net/detail/itmyhome/7613879
Usage:
I. Introduction of related resource files
<link rel="stylesheet" type="text/css" href="css/flexigrid.css"><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="js/flexigrid.js"></script>
Ii. jsp page display
<Table class = "flexigrid" style = "display: none"> </table> <SCRIPT type = "text/JavaScript" >$ (function () {$ (". flexigrid "). flexigrid ({URL: 'getuseraction. action ', datatype: 'json', colmodel: [{display: 'name', name: 'username', width: 120, sortable: True, align: 'center '}, {display: 'Organization name', name: 'orgname', width: 120, sortable: True, align: 'center'}, {display: 'status', Name: 'State', width: 100, sortable: True, align: 'center'}, {display: 'username ', name: 'loginname', width: 120, sortable: True, align: 'center'}, {display: 'creation time', name: 'ctime', width: 120, sortable: True, align: 'center'}, {display: 'note', name: 'note', width: 120, sortable: True, align: 'center'}], buttons: [{Name: 'add', bclass: 'add', onpress: Add}, {Name: 'delete', bclass: 'delete', onpress: del}, {Name: 'edit', bclass: 'edit ', onpress: Edit}], sortorder: "ASC", usepager: True, Title: 'personnel information list', userp: True, RP: 10, // default number of results per page pagestat: 'display records from {from} to {to}, total number of {total} ', // Chinese display style pagetext: 'Current page ', outof: 'total pages', showtabletogglebtn: false, resizable: True, width: 'auto', height: 265}); function add () {alert ("add ");} function del () {alert ("delete");} function edit () {alert ("edit") ;}}) </SCRIPT>
Iii. Struts Configuration
<package name="user_json" extends="json-default"><action name="getUserAction" method="queryAll" class="com.home.web.UserAction"> <result name="success" type="json"></result> </action></package>
Iv. Background code implementation
Import Java. io. ioexception; import Java. SQL. connection; import Java. SQL. resultset; import Java. SQL. resultsetmetadata; import Java. SQL. sqlexception; import Java. SQL. statement; import Java. util. arraylist; import Java. util. hashmap; import Java. util. list; import Java. util. map; import COM. home. util. connectionmanager; public class useraction {// result set Private list <Map <string, Object> rows = new arraylist <Map <string, Object> (); private integer page = 1; // Private integer total on the current page; // total number of records private integer RP; // number of records per page Public String queryall () throws ioexception {statement sta = NULL; resultset rs = NULL; try {connection conn = connectionmanager. getconnection (); STA = Conn. createstatement (); // MySQL paging string SQL = "select username, orgname, state, loginname, ctime, note from e_user limit" + (page-1) * RP + ", "+ RP; RS = sta.exe cutequery (SQL); resultsetmetadata MD = Rs. getmetadata (); // get the result set structure information, metadata int columncount = md. getcolumncount (); While (RS. next () {Map <string, Object> rowdata = new hashmap <string, Object> (); For (INT I = 1; I <= columncount; I ++) {rowdata. put (MD. getcolumnname (I), RS. getObject (I);} rows. add (rowdata);} Total = connectionmanager. getrows (); connectionmanager. closeall (RS, STA, Conn); // close resource} catch (sqlexception e) {e. printstacktrace ();} return "success";} Public String forsend () {return "success";} public list <Map <string, Object> getrows () {return rows;} public void setrows (list <Map <string, Object> rows) {This. rows = rows;} public integer getpage () {return page;} public void setpage (integer page) {This. page = page;} public integer gettotal () {return total;} public void settotal (integer total) {This. total = total;} public integer getrp () {return RP;} public void setrp (integer RP) {This. rp = RP ;}}
Page effect:
The backend Data Query code is based on MySQL and JDBC.
Source code download: http://download.csdn.net/detail/itmyhome/7613879
Reprinted please indicate the source: http://blog.csdn.net/itmyhome1990/article/details/37599503