jqueryajax請求分頁例子
(function ($) {
/*
var page = new $.Page({controlId:"testPage",totalCount:45,currentPage:1,callBack:function(){
alert("dosomething");
}});
page.show("page");
var page1 = new $.Page({controlId:"testPage1",totalCount:32,currentPage:2});
page.show("page1");
*/
$.Page = function (arg) {
//this.currentPage, this.totalPage, this.pageCount, this.contorlId;
//var content, ul, Pre, Next
this.show = function (parentId) {
if (arg.controlId != "" && arg.totalCount > 0 && arg.currentPage > 0) {
$("#" + parentId).append(create());
}
};
distroy = function () {
if ($("#" + arg.controlId)[0]) {
$("#" + arg.controlId).remove();
}
};
OnPre = function () {
if (arg.currentPage == 1) {
return false;
} else {
//Page_Redirect(parseInt(arg.currentPage) - 1);
arg.currentPage = parseInt(arg.currentPage) - 1;
arg.callBack(arg.currentPage,arg.pageNo);
}
};
OnNext = function () {
if (arg.currentPage == Math.ceil(arg.totalCount / arg.pageNo)) {
return false;
} else {
//Page_Redirect(parseInt(arg.currentPage) + 1);
arg.currentPage = parseInt(arg.currentPage) + 1;
arg.callBack(arg.currentPage,arg.pageNo);
}
};
Page_Redirect = function (no,pageSize) {
if (typeof(no) != typeof(1)) {
no = $(this).text();
}
arg.currentPage = no;
if(pageSize)
arg.pageNo = pageSize;
arg.callBack(no, arg.pageNo);
};
Change = function () {
arg.pageNo = $("#ddl_" + arg.controlId).val();
arg.callBack(1, arg.pageNo);
}
create = function () {
distroy();
var controlId = arg.controlId;
var totalCount = arg.totalCount;
var currentPage = parseInt(arg.currentPage);
var content = $("<div id=" + controlId + "></div>").addClass("pagin");
var left = $("<div class='message'>共<i class='blue'>" + totalCount + "</i>條記錄，當前顯示第 <i class='blue'>" + currentPage + " </i>頁，每頁</div>");
var ddl_pageNo = $("<select id='ddl_" + controlId + "' style='width:50px;opacity:1'></select>");
var option10 = $("<option value='10'>10筆</option>");
var option20 = $("<option value='20'>20筆</option>");
var option50 = $("<option value='50'>50筆</option>");
switch (arg.pageNo) {
case "10": option10.prop("selected",true);
break;
case "20": option20.prop("selected", true);
break;
case "50": option50.prop("selected", true);
break;
}
ddl_pageNo.append(option10);
ddl_pageNo.append(option20);
ddl_pageNo.append(option50);
ddl_pageNo.change(this.Change);
left.append(ddl_pageNo);
content.append(left);
var pageNo = arg.pageNo;//
var totalPage = Math.ceil(totalCount / pageNo);
var ul = $("<ul></ul>").addClass("paginList");
var Pre = $("<li class='paginItem' title='上一頁'><a href='javascript:;'><span class='pagepre'></span></a></li>");
Pre.click(this.OnPre);
ul.append(Pre);
var list = new Array();
if (totalPage <= 10) {
for (var n = 0; n < totalPage; n++) {
list[n] = n + 1;
}
} else {
list[0] = 1; list[1] = 2;
if (currentPage <= 6) {
list[2] = 3; list[3] = 4; list[4] = 5; list[5] = 6; list[6] = 7; list[7] = 8; list[8] = 0; list[9] = totalPage;
} else if (totalPage - currentPage > 3) {
list[2] = 0;//0代表More;
list[3] = currentPage - 2;
list[4] = currentPage - 1;
list[5] = currentPage;
list[6] = currentPage + 1;
list[7] = currentPage + 2;
list[8] = 0;
list[9] = totalPage;
} else {
list[2] = 0; list[3] = totalPage - 6; list[4] = totalPage - 5; list[5] = totalPage - 4; list[6] = totalPage - 3; list[7] = totalPage - 2; list[8] = totalPage - 1; list[9] = totalPage;
}
}
//more = $("<li class='paginItem more'><a href='javascript:;'>...</a></li>");
//no = $("<li class='paginItem'><a href='javascript:;' onclick='Page_Redirect(@n)'></a></li>");
//current = $("<li class='paginItem current'><a href='javascript:;' onclick='Page_Redirect(@n)'></a></li>");
for (var n = 0; n < list.length; n++) {
if (list[n] == 0) {
ul.append("<li class='paginItem more'><a href='javascript:;'>...</a></li>");
} else if (list[n] == currentPage) {
ul.append("<li class='paginItem current'><a href='javascript:;' >" + list[n] + "</a></li>");
} else {
var li = $("<li class='paginItem'><a href='javascript:;' >" + list[n] + "</a></li>");
li.click(this.Page_Redirect);
ul.append(li);
}
}
var Next = $("<li class='paginItem' title='下一頁'><a href='javascript:;'><span class='pagenxt'></span></a></li>");
Next.click(this.OnNext);
ul.append(Next);
content.append(ul);
return content;
}
};
})(jQuery);
$("#div_Result").empty();
$.post("/UsersLog/GetPageMessage", {
begintimes: begintime, endtimes: endtime,
names: name, uids: uid,
keywords: keyword, works: work,
functionones: functionone, functiontwos: functiontwo, functionthrees: functionthree, hid_currentPage_1: hid_currentPage, hid_pageSize_1: hid_pageSize
},
function (data, status) {
var json = eval("(" + data + ")");
if (json.success) {
var str = "";
var totalCount = 0;
var body_content = "";
totalCount = json.totalCount;
if (totalCount == 0) {
body_content = "<tr><td colspan='11'><span class='wordage'>查無數據</span></td></tr>";
}
else {
$.each(json.data, function (i, n) {
body_content += "<tr>" +
"<td>" + n.LogTime + "</td>" +
"<td>" + n.Account + "</td>" +
"<td>" + n.Name + "</td>" +
"<td>" + n.Ip + "</td>" +
"<td>" + n.Org + "</td>" +
"<td>" + n.OpType + "</td>" +
"<td>" + n.MainFunc + "</td>" +
"<td>" + n.FirstFunc + "</td>" +
"<td>" + n.SecondFunc + "</td>" +
"<td>" + n.CaseNo + "</td>" +
"<td>" + n.QueryContent + "</td>" +
"</tr>";
});
}
var divid = $("#div_Result");
divid.append("<div class='tabson'><table class='tablelist'><thead><tr><th style='width:160px'>操作時間</th><th style='width:100px'>使用者賬號</th><th style='width:100px'>使用者名稱</th><th style='width:120px'>IP</th><th style='width:120px'>使用者單位</th><th style='width:60px'>作業</th><th style='width:120px'>主功能項目</th><th style='width:120px'>次功能項目</th><th style='width:120px'>功能項目</th><th style='width:150px'>案號</th><th>內容</th></tr></thead><tbody>" + body_content + "</tbody></table></div>");
//分頁
divid.append("<div id='div_Data_Page_1' style='float:left;width:100%'></div>");
var page = new $.Page({
controlId: "dataPage", totalCount: totalCount, currentPage: $("#hid_currentPage_1").val(), pageNo: $("#hid_pageSize_1").val(), callBack: function (no, pageSize) {
$("#hid_currentPage_1").val(no);
$("#hid_pageSize_1").val(pageSize);
mypagehelper();
}
});
page.show("div_Data_Page_1");
}
else {
alert("操作失敗!");
}
});
}
在mvc結構的from表單提交中
var page = new $.Page({
controlId: "accoction", totalCount: "@PageCount", currentPage: "@currentPage", pageNo: "@pageSize", callBack: function (no,pageSize) {
var form = $("#f_association");
$("#page_accoction_PageNo").val(no);
$("#hid_pageSize_1").val(pageSize);
form.attr("action", "/Association/Index?type=next");
form.submit();
}
});
page.show("div_Page");
