Skip to content

Instantly share code, notes, and snippets.

@koolay
Last active August 29, 2015 14:02
Show Gist options
  • Save koolay/c40888b7c7e88f99bf71 to your computer and use it in GitHub Desktop.
Save koolay/c40888b7c7e88f99bf71 to your computer and use it in GitHub Desktop.
simple ajax paging
/* example:
Pager.argName = 'page';
Pager.jsonData = '';
Pager.pagerAppendToId = 'photo-paging';
Pager.pageSize = 16;
Pager.prefixUrl = "/api/LoadStoreImage?account="+account+"&shopId="+<%=MerchtId %> + "&pageSize=16";
Pager.showPageNumbers = 5;
Pager.callback = function(result){
var html = '';
var data = result.data;
for(var i=0;i<data.length;i++){
var text = data[i].Describe.length>12?data[i].Describe.substr(0,15)+"...":data[i].Describe;
html+='<li><a rel="dyn_gallery" href="'+data[i].PhotoUrl+'"><img src="'+data[i].SmallPhotoUrl+'" width="180" height="120" /></a><p title="'+data[i].Describe+'">'+text+'</p></li>';
}
$('#photosBox').html(html);
initFancybox();
}
Pager.before = function(){
$('#photosBox').html("<li>数据加载中..</li>");
}
$(function () {
Pager.get(1);
})
*/
var Pager = {
pageSize: 10,
argName: 'page',
jsonData:{},
prefixUrl: '/', //"/api/LoadStoreImage?account=xxx&shopId=112432&pageSize=16";
pagerAppendToId: 'divPager',
showPageNumbers: 5,
callback: function (result) { },
before:function(){},
get: function (page) {
var url = Pager.prefixUrl.indexOf('?') > 0 ? Pager.prefixUrl + '&' + Pager.argName + '=' + page : Pager.prefixUrl + '?' + Pager.argName + '=' + page;
Pager.before();
$.get(url, Pager.jsonData, function (data) {
Pager.callback(data);
$('#' + Pager.pagerAppendToId).html(Pager._toPagerHtml(data.total, data.page));
});
},
_toPagerHtml: function (total, page) {
var ShowPages = Pager.showPageNumbers;
if (total <= 0) { return string.Empty; }
var templateString = "<ul class=\"tunepage paging\">";
var pageCount = Math.ceil(total / Pager.pageSize);//计算总页数
curPage = page;
var buttonPageCount = Math.ceil(pageCount / ShowPages);//计算按钮总页数
var buttonPageIndex = Math.ceil(curPage / ShowPages);//当前按钮页
if (curPage == 1) {
//templateString +="<li><a href='javascript:void(0)'>首页</a></li>";
}
else {
// templateString += "<li><a href='" + GetAnchorUrl(1, actionURL, argName) + "'>首页</a></li>";
templateString += ("<li><a href='" + Pager._getAnchorUrl(curPage - 1) + "'>上一页</a></li>");
}
if (buttonPageIndex > 1) {//显示上showPages页
templateString += ("<li><a href='" + Pager._getAnchorUrl((buttonPageIndex - 2) * ShowPages + 1) + "'>...</a></li>");
}
// 显示中间数字按钮
if (buttonPageIndex == buttonPageCount) {
for (var i = (buttonPageCount - 1) * ShowPages + 1; i <= pageCount; i++) {
if (i == curPage) {
templateString += ("<li><a class='current' href='javascript:void(0)'>" + i + "</a></li>");
}
else {
templateString += ("<li><a href='" + Pager._getAnchorUrl(i) + "'>" + i + "</a></li>");
}
}
}
else {
buttonPageIndex = buttonPageIndex > buttonPageCount ? buttonPageCount : buttonPageIndex;
for (var i = (buttonPageIndex - 1) * ShowPages + 1; i <= buttonPageIndex * ShowPages; i++) {
if (i == curPage) {
templateString += ("<li ><a class='current' href='javascript:void(0)'>" + i + "</a></li>");
}
else {
templateString += ("<li><a href='" + Pager._getAnchorUrl(i) + "'>" + i + "</a></li>");
}
}
}
//end
if (buttonPageIndex < buttonPageCount) {
//显示下showPages页
templateString += ("<li><a href='" + Pager._getAnchorUrl(buttonPageIndex * ShowPages + 1) + "'>...</a></li>");
}
if (curPage == pageCount) {
// templateString.Append("<li><a href='javascript:void(0)'>末页</a></li>");
}
else {
templateString += ("<li><a href='" + Pager._getAnchorUrl(curPage + 1) + "'>下一页</a></li>");
// templateString.Append("<li><a href='" + GetAnchorUrl(PageCount, actionURL, argName) + "'>末页</a></li>");
}
templateString += ("\r\n</ul>");
templateString += ("<span class=\"pager_info\">" + curPage + "/" + pageCount + "</span>");
return templateString;
},
_getAnchorUrl: function (curPage) {
//生成客户端分页事件
return 'javascript:Pager.get(' + curPage + ')';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment