Code for implementing dynamic table paging Based on Jquery

When you click the page icon, the program will automatically go to the background to obtain the corresponding page number of records.
The key code is as follows:
The css and js files to be introduced include: Copy codeThe Code is as follows: <link rel = "stylesheet" type = "text/css" href = "<% = basePath %> css/theme/default/css/jpage.css"> </link>
<Link ID = "skin" rel = "stylesheet" type = "text/css" href = "<% = basePath %> css/config.css"/>
<Script language = "javascript" type = "text/javascript" src = "<% = basePath %> js/jquery. js"> </script>

The jsp page code is as follows:Copy codeThe Code is as follows: <script language = "jscript" type = "text/javascript">
Var pageIndex = 1; // current page number
$ (Function (){
GetPageCount (); // obtain the number of pages and the total number of records
$ ("# Load"). hide (); // hide the loading prompt
$ ("# Template"). hide (); // hide the template
ChangeState (); // sets the initial status of the page flip button.
Bind (); // bind the data on the first page
// Click the button on the first page
$ ("# First"). click (function (){
PageIndex = 1;
ChangeState (0, 1 );
Bind ();
});
// Click the previous page button event
$ ("# Previous"). click (function (){
PageIndex-= 1;
ChangeState (-1, 1 );
If (pageIndex <= 1 ){
PageIndex = 1;
ChangeState (0,-1 );
}
Bind ();
});
// Next page button click event
$ ("# Next"). click (function (){
PageIndex + = 1;
ChangeState (1,-1 );
If (pageIndex> = pageCount)
{
PageIndex = pageCount;
ChangeState (-1, 0 );
}
Bind (pageIndex );
});
// Button click event on the last page
$ ("# Last"). click (function (){
PageIndex = pageCount;
ChangeState (1, 0 );
Bind (pageIndex );
});
// Select event for the number of records displayed per page
$ ("# PageSize"). change (function (){
Bind ();
})
});
// Obtain data using the AJAX method and display it on the page
Function bind (){
$ ("# Load"). show ();
Var pageSize = $ ("# pageSize"). val ();
$. Ajax ({
Type: "get", // use the get method to access the background
DataType: "json", // return data in json format
Url: "<% = basePath %> actionSmUser. do? Method = listUser2 ", // The background address to be accessed
Data: "pageIndex =" + pageIndex + "& pageSize =" + pageSize, // data to be sent
Complete: function (msg) {// msg is the returned data. Bind The data here.
$ ("[Id = ready]"). remove ();
Var data = eval ("(" + msg. responseText + ")");
$. Each (data, function (I, n ){
Var row = $ ("# template"). clone ();
Row. find ("# userId"). text (n. userId );
Row. find ("# userName"). text (n. userName );
Row. find ("# depId"). text (n. depId );
Row. find ("# createTime"). text (n. createTime );
If (n. createTime! = Undefined) row. find ("# createTime"). text (n. createTime );
Row. find ("# creator"). text (n. creator );
Row. find ("# menusId"). text (n. menusId );
Row. find ("# isValid"). text (n. isValid );
Row. attr ("id", "ready"); // change the id of the row bound to the data.
Row. appendTo ("# datas"); // Add it to the template container
});
$ ("[Id = ready]"). show ();
SetPageInfo ();
}
});
}
Function ChangeDate (date ){
Return date. replace ("-", "/"). replace ("-","/");
}
// Set the page number/total page number
Function SetPageInfo (){
Var pageCount = $ ("# pageCount"). val ();
Var totalCount = $ ("# totalCount"). val ();
Var pageSize = $ ("# pageSize"). val ();
$ ("# Pageinfo" pai.html ("<input class = 'default _ pgCurrentPage 'id = 'pageindex' type = 'text' value ='" + pageIndex +
"'Style = 'width: 30px '/> page" + "/" + "Total" + pageCount + "page" +
"Retrieved" + totalCount + "records, display the" + (pageIndex * pageSize-pageSize) + "Bar-th" + (pageIndex * pageSize) + "records ");
}
// Obtain the total number of pages by AJAX
Function GetPageCount (){
Var pageSize = $ ("# pageSize"). val ();
$. Ajax ({
Type: "get ",
DataType: "text ",
Url: "<% = basePath %> actionSmUser. do? Method = getPageCount ",
Data: "pageSize =" + pageSize,
Async: false,
Success: function (msg ){
Var data = eval ("(" + msg + ")");
$ ("# PageCount"). val (data [0]. pageCount );
$ ("# TotalCount"). val (data [0]. totalCount );
}
});
}
// Change the page flip button status
Function ChangeState (state1, state2 ){
$ ("# First"). attr ("class", "default_pgFirst default_pgBtn ");
$ ("# Previous"). attr ("class", "default_pgPrev default_pgBtn ");
$ ("# Next"). attr ("class", "default_pgNext default_pgBtn ");
$ ("# Last"). attr ("class", "default_pgLast default_pgBtn ");
If (state1 = 1 ){
Document. getElementById ("first"). disabled = "";
Document. getElementById ("previous"). disabled = "";
} Else if (state1 = 0 ){
Document. getElementById ("first"). disabled = "disabled ";
Document. getElementById ("previous"). disabled = "disabled ";
$ ("# First"). attr ("class", "default_pgFirstDisabled default_pgBtn ");
$ ("# Previous"). attr ("class", "default_pgPrevDisabled default_pgBtn ");
} If (state2 = 1 ){
Document. getElementById ("next"). disabled = "";
Document. getElementById ("last"). disabled = "";
} Else if (state2 = 0 ){
Document. getElementById ("next"). disabled = "disabled ";
Document. getElementById ("last"). disabled = "disabled ";
$ ("# Next"). attr ("class", "default_pgNextDisabled default_pgBtn ");
$ ("# Last"). attr ("class", "default_pgLastDisabled default_pgBtn ");
}
}
</Script>

The html page code is as follows:Copy codeThe Code is as follows: <body>
<Div>
<Div>
<Br/>
<Table id = "datas" align = "center" class = "listtable" width = "100%" bgcolor = "# CCCCCC" cellSpacing = "1" cellpadding = "1" style = ""margin-top: 5px; ">
<Tr class = "fixheader">
& Lt; th width = "14%" & gt;
User ID </th>
& Lt; th width = "14%" & gt;
User name </th>
& Lt; th width = "14%" & gt;
Department </th>
& Lt; th width = "14%" & gt;
Creation Time </th>
& Lt; th width = "14%" & gt;
Created by </th>
& Lt; th width = "14%" & gt;
Menu set name </th>
& Lt; th width = "14%" & gt;
Valid or not </th>
</Tr>
<Tr id = "template" height = "22px" bgcolor = "# F9FDFF" onmouseover = "javascript: this. style. backgroundColor = '# ffffcc'; return true; "onMouseOut =" javascript: this. style. backgroundColor = '# F9FDFF'; return true; ">
<Td id = "userId" class = "tdc">
</Td>
<Td id = "userName" class = "tdc">
</Td>
<Td id = "depId" class = "tdc">
</Td>
<Td id = "createTime" class = "tdc">
</Td>
<Td id = "creator" class = "tdc">
</Td>
<Td id = "menusId" class = "tdc">
</Td>
<Td id = "isValid" class = "tdc">
</Td>
</Tr>
</Table>
</Div>
<Div id = "load" style = "left: 0px; position: absolute; top: 0px; background-color: red">
LOADING ....
</Div>
<Div class = "default_pgContainer">
<Div class = "default_container">
<Div class = "default_pgPanel" id = "skinDiv">
<Table class = "default_pgToolbar">
<Tr>
<Td class = "black_pgCurrentPage">
<Select id = "pageSize" name = "pageSize">
<Option selected = "selected" value = "10"> 10 </option>
<Option value = "20"> 20 </option>
<Option value = "30"> 30 </option>
</Select>
</Td>
<Td>
<Div id = "first" class = "default_pgFirst default_pgBtn"/>
</Td>
<Td>
<Div id = "previous" class = "default_pgPrev default_pgBtn"/>
</Td>
<Td class = "default_separator">
</Td>
<Td>
<Div id = "next" class = "default_pgNext default_pgBtn"/>
</Td>
<Td>
<Div id = "last" class = "default_pgLast default_pgBtn"/>
</Td>
<Td class = "default_separator">
</Td>
<Td>
<Span id = "pageinfo"> </span>
</Td>
</Tr>
</Table>
</Div>
</Div>
</Div>
</Div>
<Div id = "test"> </div>
<Input type = "hidden" id = "pageCount" style = "width: 45px"/>
<Input type = "hidden" id = "totalCount" style = "width: 45px"/>
</Body>

The code in the background action is as follows:Copy codeThe Code is as follows: // obtain user information by PAGE
Public void listUser2 (ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response ){
RequestTool tool = new RequestTool (request );
Integer pageSize = tool. getIntParameter ("pageSize ");
Integer pageIndex = tool. getIntParameter ("pageIndex ");
ResultPage res = serviceSmUserImpl. findAllSmUsers (pageIndex, pageSize );
List <SmUser> smUserList = (List <SmUser>) res. getResult ();
JSONArray array = new JSONArray ();
JSONObject object;
For (SmUser user: smUserList ){
Object = new JSONObject ();
Object. put ("userId", user. getUserId ());
Object. put ("userName", user. getUserName ());
Object. put ("depId", user. getOrganCode ());
Object. put ("createTime", user. getCreateTime ());
Object. put ("creator", user. getCreator ());
Object. put ("menusId", user. getMenusId ());
Object. put ("isValid", (user. getValid (). equals ("1 ")? "Valid": "invalid "));
Array. add (object );
}
AjaxTool. returnAjaxResponse (response, array. toJSONString ());
}
// Obtain the total number of records and total number of pages
Public void getPageCount (ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response ){
RequestTool tool = new RequestTool (request );
Int pageSize = tool. getIntParameter ("pageSize ");
List <POJO> pojos = serviceSmUserImpl. findAll ();
Int pageCount = pojos. size () % pageSize> 0? (Pojos. size ()/pageSize + 1) :( pojos. size ()/pageSize );
JSONArray array = new JSONArray ();
JSONObject object = new JSONObject ();
Object. put ("pageCount", pageCount );
Object. put ("totalCount", pojos. size ());
Array. add (object );
AjaxTool. returnAjaxResponse (response, array. toJSONString ());
}

Package and download files