使用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());
}