使用Jquery实现表格动态分页

项目中经常会对表格进行分页，以下运用jquery对用户管理中的用户表格进行分页。

当页面点击分页图标时，程序会自动去后台获取对应页数的记录。

相关文件可从以下地址中选择下载：http://files.cnblogs.com/xiangpiaopiao2011/%E4%BD%BF%E7%94%A8jquery%E8%BF%9B%E8%A1%8C%E8%A1%A8%E6%A0%BC%E5%8A%A8%E6%80%81%E5%88%86%E9%A1%B5.rar

关键代码如下：

需要引入的css和js文件有：

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

其中jsp页面代码如下：

< script language = " jscript " type = " text/javascript " >
var pageIndex = 1 ; // 当前页数
$( function (){
GetPageCount(); // 获取分页数量以及总的记录条数
$( " #load " ).hide(); // 隐藏loading提示
$( " #template " ).hide(); // 隐藏模板
ChangeState( 0 , 1 ); // 设置翻页按钮的初始状态

bind(); // 绑定第一页的数据

// 第一页按钮click事件
$( " #first " ).click( function (){
pageIndex = 1 ;
ChangeState( 0 , 1 );
bind();
});

// 上一页按钮click事件
$( " #previous " ).click( function (){
pageIndex -= 1 ;
ChangeState( - 1 , 1 );
if (pageIndex <= 1 ){
pageIndex = 1 ;
ChangeState( 0 , - 1 );
}
bind();
});

// 下一页按钮click事件
$( " #next " ).click( function (){
pageIndex += 1 ;
ChangeState( 1 , - 1 );
if (pageIndex >= pageCount)
{
pageIndex = pageCount;
ChangeState( - 1 , 0 );
}
bind(pageIndex);
});

// 最后一页按钮click事件
$( " #last " ).click( function (){
pageIndex = pageCount;
ChangeState( 1 , 0 );
bind(pageIndex);
});
// 每页显示记录条数select事件
$( " #pageSize " ).change( function (){
bind();
})
});

// AJAX方法取得数据并显示到页面上
function bind(){
$( " #load " ).show();
var pageSize = $( " #pageSize " ).val();
$.ajax({
type: " get " , // 使用get方法访问后台
dataType: " json " , // 返回json格式的数据
url: " <%=basePath%>actionSmUser.do?method=listUser2 " , // 要访问的后台地址
data: " pageIndex= " + pageIndex + " &pageSize= " + pageSize, // 要发送的数据
complete : function (msg){ // msg为返回的数据，在这里做数据绑定
$( " [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 " ); // 改变绑定好数据的行的id
row.appendTo( " #datas " ); // 添加到模板的容器中
});
$( " [id=ready] " ).show();
SetPageInfo();
}
});
}
function ChangeDate(date){
return date.replace( " - " , " / " ).replace( " - " , " / " );
}
// 设置第几页/共几页的信息
function SetPageInfo(){
var pageCount = $( " #pageCount " ).val();
var totalCount = $( " #totalCount " ).val();
var pageSize = $( " #pageSize " ).val();
$( " #pageinfo " ).html( " 第<input class='default_pgCurrentPage' id='pageIndex' type='text' value=' " + pageIndex +
" ' style='width: 30px' /> 页 " + " / " + " 共 " + pageCount + " 页 " +
" 检索到 " + totalCount + " 条记录，显示第 " + (pageIndex * pageSize - pageSize) + " 条 - 第 " + (pageIndex * pageSize) + " 条记录 " );
}
// 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);
}
});
}

// 改变翻页按钮状态
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>

html页面代码如下：

< 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 " >
< th width = " 14% " >
用户ID < / th>
< th width = " 14% " >
用户名称 < / th>
< th width = " 14% " >
所在科室 < / th>
< th width = " 14% " >
创建时间 < / th>
< th width = " 14% " >
创建人 < / th>
< th width = " 14% " >
菜单集名称 < / th>
< th width = " 14% " >
是否有效 < / 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>

后台action中代码如下：

// 分页获取用户信息
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 " ) ? " 有效 " : " 无效 " ));
array.add(object);
}

AjaxTool.returnAjaxResponse(response, array.toJSONString());

}

// 获取总的记录数和总页数
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());

}

转载于:https://www.cnblogs.com/xiangpiaopiao2011/archive/2011/06/16/2083050.html