根据网上资料制作ajaxpage.js,用于拿到数据后显示分页页码,调用示例方法如下:
<ul class="list-news"></ul>
<div class="page"></div>
<script src="js/ajaxpage.js"></script>
<script>
function ajaxLoadData(ul){
$.get('https://www.xueyidian.cn/api/Article/GetList', para,
function (res) {
if (res.Code == 0 && res.ResultContent.length > 0) {
var listData = res.ResultContent;
if (res.page) {
if (res.page.DataCount > 0) {
// 记录到属性值
ul.attr({
"count": response.page.DataCount,
"page-index": response.page.PageIndex,
"page-size": response.page.PageSize
});
// 生成分页页码
ul.next(".page").html(initPage(res.page));
}
}
var html = '';
listData.forEach(function(item, index, array){
html += '<li><span class="date">' + item.PublishTime + '</span><a href="' + item.ContentRouteUrl + '">' + item.Title + '</a></li>';
});
ul.html(html);
}
}
, "json");
}
</script>
initPage(page)返回页码HTML,page对象传入参数说明:
| page.DataCount | 列表数据总数量 |
| page.PageSize | 每页分页数量 |
| page.PageIndex | 当前页码 |
分页页码点击换页触发的函数:
// 分页切换
function retrieve(pageIndex, el) {
var ul = $(el).parent(".page").prev("ul");
ul.attr("page-index", pageIndex);
ajaxLoadData(ul);
}
ajaxpage.js代码:
function initPage(pageInfo) {
var total = Math.ceil(pageInfo.DataCount / pageInfo.PageSize);//总页数
var pageNum = pageInfo.PageIndex;//当前页
var firstPage = 1;//第一页
var prePage = pageNum - 1;//上一页
var nextPage = pageNum + 1;//下一页
var lastPage = total;
// 先拼接点击事件 ,用于解决字符串拼接的问题
var firstPageStr = "retrieve(1, this)";
var prePageStr = "retrieve(" + prePage + ", this)";
var nextPageStr = "retrieve(" + nextPage + ", this)";
var lastPageStr = "retrieve(" + lastPage + ", this)";
var pageHtml = '';
//做判断,满足某些条件时,不能点击
if (firstPage == pageNum) {
pageHtml += "<a href='javascript:void(0);' class='disabled'>首页</a>";
} else {
pageHtml += "<a href='javascript:void(0);' onclick='" + firstPageStr + "'>首页</a>";
}
if (prePage <= 0) {
pageHtml += "<a class='disabled'>上一页</a>";
} else {
pageHtml += "<a href='javascript:void(0);' onclick='" + prePageStr + "'>上一页</a>";
}
//生成中间的页面
if (pageNum <= 3) {
for (var i = 1; i <= (total <= 5 ? total : 5); i++) {
if (i == pageNum) {
pageHtml += "<a class='current'>" + i + "</a>";
} else {
var pageNumber = "retrieve(" + i + ", this)";
pageHtml += "<a href='javascript:void(0);' onclick='" + pageNumber + "'>" + i + "</a>";
}
}
} else if (pageNum > 3 && total <= (pageNum + 2)) {
for (var i = total - 4; i <= total; i++) {
if (i == pageNum) {
pageHtml += "<a class='current'>" + i + "</a>";
} else {
var pageNumber = "retrieve(" + i + ", this)";
pageHtml += "<a href='javascript:void(0);' onclick='" + pageNumber + "'>" + i + "</a>";
}
}
} else if (pageNum > 3 && total > (pageNum + 2)) {
for (var i = pageNum - 2; i <= pageNum + 2; i++) {
if (i == pageNum) {
pageHtml += "<a class='current'>" + i + "</a>";
} else {
var pageNumber = "retrieve(" + i + ", this)";
pageHtml += "<a href='javascript:void(0);' onclick='" + pageNumber + "'>" + i + "</a>";
}
}
}
if (nextPage <= 0 || nextPage > total) {
pageHtml += "<a href='javascript:void(0);' class='disabled'>下一页</a>";
} else {
pageHtml += "<a href='javascript:void(0);' onclick='" + nextPageStr + "'>下一页</a>";
}
if (lastPage == pageNum) {
pageHtml += "<a href='javascript:void(0);' class='disabled'>尾页</a>";
} else {
pageHtml += "<a href='javascript:void(0);' onclick='" + lastPageStr + "'>尾页</a>";
}
return pageHtml;
}
