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