Macro Da

每天学一点,成长多一点!

使用Ajax获取数据实现JS分页页码生成

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注