Ajax分页功能的实现

　　电脑换了固态硬盘，准备重装系统，因此打算把项目里一直延用的代码总结出来，防止丢失，以后也方便查阅。Ajax分页已经是非常普遍的技术了，所以也没什么需要特别说明的，直接贴代码：

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8; IE=7; IE=edge">
    <meta name="renderer" content="webkit">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #dataList {
            min-height: 400px;
        }

        #page {
            text-align: center;
            font-size: 0;
        }

        .pageBtn {
            font-size: 14px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            display: inline-block;
            color: #000;
            margin: 5px;
            vertical-align: middle;
        }

        .pageBtn.current, .pageBtn:hover {
            color: #d60000;
            background-color: #ffc8f3;
        }

        #page a.prev,
        #page a.next {
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: 8px;
            display: inline-block;
            vertical-align: middle;
            margin: 0 8px;
        }

        #page a.prev {
            border-style: dashed solid dashed dashed;
            border-color: transparent #c34da9 transparent transparent;
        }

        #page a.next {
            border-style: dashed dashed dashed solid;
            border-color: transparent transparent transparent #c34da9;
        }

        ul {
            padding-left: 50px;
            list-style: decimal;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="pagination.js"></script>
</head>
<body>
<ul id="dataList"></ul>
<div id="page"></div>

<script>
    function initPerData(page) {
        $('#dataList').empty();
        var options = {
            _page: page,
            _limit: 1
        };
        getFakeData(options);
    }

    function getFakeData(options) {
        $.get('http://localhost:3000/posts', options, function (data) {
            $('#page').html(makePage(data[0].total, options._page, options._limit));

            var html = '';
            for (var i = 0, len = data.length; i < len; i++) {
                html += `<li>${data[i].title}<br/>${data[i].body}</li>`;
            }
            $('#dataList').append(html);
        });
    }

    getFakeData({_page: 1, _limit: 1});
</script>
</body>
</html>

pagination.js

/**
 * todo:创建分页
 * @param total {Number} 数据总条数
 * @param currentPage {Number} 当前页码
 * @param pageSize {Number} 每页显示几条数据
 */
function makePage(total, currentPage, pageSize) {
    pageSize = pageSize || 10;

    var html = '';
    var pageCount = Math.ceil(total / pageSize);    //总页数

    if (pageCount > 1) {
        if (pageCount <= 10) {
            for (var i = 1; i <= pageCount; i++) {
                if (currentPage === i) {
                    html += '<a href="javascript:void(0)" class="pageBtn current">' + i + '</a>';
                } else {
                    html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
                }
            }
        } else {//如果大于10页执行此段分支
            if (currentPage !== 1) {//如果不是第一页则显示上一页按钮
                html += '<a onclick="initPerData(' + (currentPage - 1) + ')" href="#dataList" class="prev" data-currentP="' + (currentPage - 1) + '"></a>'
            }

            if (currentPage <= 4) {
                for (var i = 1; i <= 10; i++) {
                    if (currentPage === i) {
                        html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
                    } else {
                        html += '<a href="#dataList"  onclick="initPerData(' + i + ')" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
                    }
                }
                html += '<a href="#dataList" class="pageBtn" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>';
            } else {
                html += '<a href="#dataList" class="pageBtn" onclick="initPerData(1)"  data-currentP="1">1...</a>';
                if (pageCount - currentPage <= 8) {
                    for (var i = currentPage - (9 - (pageCount - currentPage)); i <= pageCount; i++) {
                        if (currentPage === i) {
                            html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
                        } else {
                            html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
                        }
                    }
                } else {
                    for (var i = currentPage - 2; i <= currentPage + 7; i++) {
                        if (currentPage === i) {
                            html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
                        } else {
                            html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
                        }
                    }
                    html += '<a class="pageBtn" href="#dataList" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>';
                }
            }

            if (currentPage !== pageCount) {//不是最后一页就显示下一页
                html += '<a onclick="initPerData(' + (currentPage + 1) + ')" href="#dataList" class="next" data-currentP="' + (currentPage + 1) + '"></a>';
            }
        }
    }
    return html;
}

每个需要分页的页面都应该实现一个initPerData方法，用于实现分页以外不同的逻辑。

posted @ 2018-08-30 10:39 逐影阅读(1974) 评论(0) 编辑收藏举报

刷新页面返回顶部