使用Jquery实现表格动态分页

时间:2024-03-08 09:49:23

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

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

相关文件可从以下地址中选择下载:https://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());

}

相关文章