Last active
August 29, 2015 14:02
-
-
Save koolay/c40888b7c7e88f99bf71 to your computer and use it in GitHub Desktop.
simple ajax paging
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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