當頁面點選分頁圖示時，程式會自動去背景擷取對應頁數的記錄。
關鍵代碼如下：
需要引入的css和js檔案有：
其中jsp頁面代碼如下：
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: "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(" 第 頁" + "/" +"共 "+pageCount+"頁"+
" 檢索到 "+totalCount+"條記錄，顯示第 "+(pageIndex*pageSize-pageSize)+" 條 - 第 "+(pageIndex*pageSize)+" 條記錄");
}
//AJAX方法取得分頁總數
function GetPageCount(){
var pageSize = $("#pageSize").val();
$.ajax({
type: "get",
dataType: "text",
url: "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");
}
}
html頁面代碼如下：
| 使用者ID | 使用者名稱 | 所在科室 | 建立時間 | 建立人 | 菜單集名稱 | 是否有效 |
|---|---|---|---|---|---|---|
LOADING....
| 10 20 30 |
背景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 smUserList = (List)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 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());
}
檔案打包下載下傳