根据网上资料制作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; }