基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
更新時(shí)間:2011年06月21日 23:11:49 作者:
項(xiàng)目中經(jīng)常會(huì)對(duì)表格進(jìn)行分頁(yè),以下運(yùn)用jquery對(duì)用戶(hù)管理中的用戶(hù)表格進(jìn)行分頁(yè)。
當(dāng)頁(yè)面點(diǎn)擊分頁(yè)圖標(biāo)時(shí),程序會(huì)自動(dòng)去后臺(tái)獲取對(duì)應(yīng)頁(yè)數(shù)的記錄。
關(guān)鍵代碼如下:
需要引入的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頁(yè)面代碼如下:
<script language="jscript" type="text/javascript">
var pageIndex = 1; //當(dāng)前頁(yè)數(shù)
$(function(){
GetPageCount();//獲取分頁(yè)數(shù)量以及總的記錄條數(shù)
$("#load").hide();//隱藏loading提示
$("#template").hide();//隱藏模板
ChangeState(0,1);//設(shè)置翻頁(yè)按鈕的初始狀態(tài)
bind();//綁定第一頁(yè)的數(shù)據(jù)
//第一頁(yè)按鈕click事件
$("#first").click(function(){
pageIndex = 1;
ChangeState(0,1);
bind();
});
//上一頁(yè)按鈕click事件
$("#previous").click(function(){
pageIndex -= 1;
ChangeState(-1,1);
if(pageIndex <= 1){
pageIndex = 1;
ChangeState(0,-1);
}
bind();
});
//下一頁(yè)按鈕click事件
$("#next").click(function(){
pageIndex += 1;
ChangeState(1,-1);
if(pageIndex>=pageCount)
{
pageIndex = pageCount;
ChangeState(-1,0);
}
bind(pageIndex);
});
//最后一頁(yè)按鈕click事件
$("#last").click(function(){
pageIndex = pageCount;
ChangeState(1,0);
bind(pageIndex);
});
//每頁(yè)顯示記錄條數(shù)select事件
$("#pageSize").change(function(){
bind();
})
});
//AJAX方法取得數(shù)據(jù)并顯示到頁(yè)面上
function bind(){
$("#load").show();
var pageSize = $("#pageSize").val();
$.ajax({
type: "get",//使用get方法訪問(wèn)后臺(tái)
dataType: "json",//返回json格式的數(shù)據(jù)
url: "<%=basePath%>actionSmUser.do?method=listUser2",//要訪問(wèn)的后臺(tái)地址
data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要發(fā)送的數(shù)據(jù)
complete : function(msg){//msg為返回的數(shù)據(jù),在這里做數(shù)據(jù)綁定
$("[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");//改變綁定好數(shù)據(jù)的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[id=ready]").show();
SetPageInfo();
}
});
}
function ChangeDate(date){
return date.replace("-","/").replace("-","/");
}
//設(shè)置第幾頁(yè)/共幾頁(yè)的信息
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' /> 頁(yè)" + "/" +"共 "+pageCount+"頁(yè)"+
" 檢索到 "+totalCount+"條記錄,顯示第 "+(pageIndex*pageSize-pageSize)+" 條 - 第 "+(pageIndex*pageSize)+" 條記錄");
}
//AJAX方法取得分頁(yè)總數(shù)
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);
}
});
}
//改變翻頁(yè)按鈕狀態(tài)
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頁(yè)面代碼如下:
<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%">
用戶(hù)ID</th>
<th width="14%">
用戶(hù)名稱(chēng)</th>
<th width="14%">
所在科室</th>
<th width="14%">
創(chuàng)建時(shí)間</th>
<th width="14%">
創(chuàng)建人</th>
<th width="14%">
菜單集名稱(chēng)</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>
后臺(tái)action中代碼如下:
//分頁(yè)獲取用戶(hù)信息
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")?"有效":"無(wú)效"));
array.add(object);
}
AjaxTool.returnAjaxResponse(response, array.toJSONString());
}
//獲取總的記錄數(shù)和總頁(yè)數(shù)
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());
}
文件打包下載
關(guān)鍵代碼如下:
需要引入的css和js文件有:
復(fù)制代碼 代碼如下:
<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頁(yè)面代碼如下:
復(fù)制代碼 代碼如下:
<script language="jscript" type="text/javascript">
var pageIndex = 1; //當(dāng)前頁(yè)數(shù)
$(function(){
GetPageCount();//獲取分頁(yè)數(shù)量以及總的記錄條數(shù)
$("#load").hide();//隱藏loading提示
$("#template").hide();//隱藏模板
ChangeState(0,1);//設(shè)置翻頁(yè)按鈕的初始狀態(tài)
bind();//綁定第一頁(yè)的數(shù)據(jù)
//第一頁(yè)按鈕click事件
$("#first").click(function(){
pageIndex = 1;
ChangeState(0,1);
bind();
});
//上一頁(yè)按鈕click事件
$("#previous").click(function(){
pageIndex -= 1;
ChangeState(-1,1);
if(pageIndex <= 1){
pageIndex = 1;
ChangeState(0,-1);
}
bind();
});
//下一頁(yè)按鈕click事件
$("#next").click(function(){
pageIndex += 1;
ChangeState(1,-1);
if(pageIndex>=pageCount)
{
pageIndex = pageCount;
ChangeState(-1,0);
}
bind(pageIndex);
});
//最后一頁(yè)按鈕click事件
$("#last").click(function(){
pageIndex = pageCount;
ChangeState(1,0);
bind(pageIndex);
});
//每頁(yè)顯示記錄條數(shù)select事件
$("#pageSize").change(function(){
bind();
})
});
//AJAX方法取得數(shù)據(jù)并顯示到頁(yè)面上
function bind(){
$("#load").show();
var pageSize = $("#pageSize").val();
$.ajax({
type: "get",//使用get方法訪問(wèn)后臺(tái)
dataType: "json",//返回json格式的數(shù)據(jù)
url: "<%=basePath%>actionSmUser.do?method=listUser2",//要訪問(wèn)的后臺(tái)地址
data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要發(fā)送的數(shù)據(jù)
complete : function(msg){//msg為返回的數(shù)據(jù),在這里做數(shù)據(jù)綁定
$("[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");//改變綁定好數(shù)據(jù)的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[id=ready]").show();
SetPageInfo();
}
});
}
function ChangeDate(date){
return date.replace("-","/").replace("-","/");
}
//設(shè)置第幾頁(yè)/共幾頁(yè)的信息
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' /> 頁(yè)" + "/" +"共 "+pageCount+"頁(yè)"+
" 檢索到 "+totalCount+"條記錄,顯示第 "+(pageIndex*pageSize-pageSize)+" 條 - 第 "+(pageIndex*pageSize)+" 條記錄");
}
//AJAX方法取得分頁(yè)總數(shù)
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);
}
});
}
//改變翻頁(yè)按鈕狀態(tài)
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頁(yè)面代碼如下:
復(fù)制代碼 代碼如下:
<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%">
用戶(hù)ID</th>
<th width="14%">
用戶(hù)名稱(chēng)</th>
<th width="14%">
所在科室</th>
<th width="14%">
創(chuàng)建時(shí)間</th>
<th width="14%">
創(chuàng)建人</th>
<th width="14%">
菜單集名稱(chēng)</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>
后臺(tái)action中代碼如下:
復(fù)制代碼 代碼如下:
//分頁(yè)獲取用戶(hù)信息
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")?"有效":"無(wú)效"));
array.add(object);
}
AjaxTool.returnAjaxResponse(response, array.toJSONString());
}
//獲取總的記錄數(shù)和總頁(yè)數(shù)
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());
}
文件打包下載
您可能感興趣的文章:
- jquery實(shí)現(xiàn)的分頁(yè)顯示功能示例
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- 基于JQuery的Pager分頁(yè)器實(shí)現(xiàn)代碼
- Jquery簡(jiǎn)單分頁(yè)實(shí)現(xiàn)方法
- jquery pagination插件實(shí)現(xiàn)無(wú)刷新分頁(yè)代碼
- jquery+json實(shí)現(xiàn)數(shù)據(jù)列表分頁(yè)示例代碼
- jquery dataTable 后臺(tái)加載數(shù)據(jù)并分頁(yè)實(shí)例代碼
- jquery分頁(yè)插件jquery.pagination.js使用方法解析
- JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
- jquery+ashx無(wú)刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁(yè)、排序、過(guò)濾功能)
- jquery分頁(yè)優(yōu)化操作實(shí)例分析
相關(guān)文章
Bootstrop實(shí)現(xiàn)多級(jí)下拉菜單功能
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡(jiǎn)潔靈活,使得 Web 開(kāi)發(fā)更加快捷。本文重點(diǎn)給大家介紹bootstrap實(shí)現(xiàn)多級(jí)下拉菜單功能的實(shí)例代碼,感興趣的朋友一起學(xué)習(xí)吧2016-11-11jquery全選checkBox功能實(shí)現(xiàn)代碼(取消全選功能)
這篇文章主要介紹了jquery實(shí)現(xiàn)checkBox全選功能、取消全選功能,代碼簡(jiǎn)單,大家可以直接參考使用2013-12-12jquery通過(guò)load獲取文件的內(nèi)容并跳到錨點(diǎn)的方法
這篇文章主要介紹了jquery通過(guò)load獲取文件的內(nèi)容并跳到錨點(diǎn)的方法,涉及l(fā)oad及animate等方法的使用技巧,需要的朋友可以參考下2015-01-01再談Jquery Ajax方法傳遞到action(補(bǔ)充)
之前寫(xiě)過(guò)一篇文章Jquery Ajax方法傳值到action,本文是對(duì)該文的補(bǔ)充2014-05-05jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-1120個(gè)非常棒的Jquery實(shí)用工具 國(guó)外文章
網(wǎng)站設(shè)計(jì)者往往會(huì)設(shè)計(jì)一些小的工具類(lèi)(widgets)或者一些可復(fù)用的程序,從而使頁(yè)面更楚楚動(dòng)人,更吸引瀏覽者駐足。這里收集了20個(gè)常用Jquery工具類(lèi),這些小的工具可以幫助網(wǎng)站設(shè)計(jì)人員和站長(zhǎng)非常容易地創(chuàng)建漂亮的站點(diǎn)。2010-01-01淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)?lái)一篇淺談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09