网站首页JavaScript
分页的实现

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>分页（Pagination）</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap-4.6.2-dist/css/bootstrap.min.css">
</head>
<body>
<nav aria-label="Page navigation example" style="margin-top:250px;">
    <ul class="pagination justify-content-center"></ul>
</nav>
<script type="text/jscript" src="./jquery.min.js"></script>
<script type="text/javascript">
    // 地址样板：https://www.example.com/test.html?sex=2&birth=2008&page={$page}
    // 演示地址：https://www.example.com/test.html?sex=2&birth=2008&page=16

    /**
     * 获取URL参数
     *
     * @param name string 参数名，如果为“*”则获取所有参数（对象格式）
     * @param defaultValue mixed 参数不存在时使用的默认值，仅在name参数不为“*”时有效
     * @return {mixed} 参数值
     */
    function urlSearchParamsGet(name, defaultValue) {
        let value = null;

        if (name !== '*') {
            value = (new URLSearchParams((new URL(window.location.href)).search)).get(name);

            if (value === null) {
                value = defaultValue;
            }
        } else {
            value = {};

            let entries = (new URLSearchParams((new URL(window.location.href)).search)).entries();
            for (let param of entries) {
                value[param[0]] = param[1];
            }
        }

        return value;
    }

    /**
     * 获取URL样板
     *
     * @return {string}
     */
    function urlPattern() {
        let params = urlSearchParamsGet('*', {}); // 从URL获取所有GET参数（对象格式）

        'page' in params && delete params.page; // 删除对象的page属性（如果有的话）

        // 转成查询字符串，即“key1=value1&key2=value2&key3=value3”格式
        let query = Object.keys(params).map(key => key + '=' + params[key]).join('&');

        // 构造列表页URL模板
        let url = './test.html?';
        url += (query !== '') ? (query + '&page={$page}') : 'page={$page}';

        return url;
    }

    /**
     * 显示分页内容
     *
     * @param count int 符合查询条件的记录总数
     */
    function pagination(count) {
        // 至少有一条符合查询条件的记录才需要显示页码
        if (count > 0) {
            let max = 10; // 最多显示几个数字页码（不包含首页、上一页、下一页、尾页）

            let total = Math.ceil(count / size); // 计算出总页数
            let page = parseInt(urlSearchParamsGet('page', 1)); // 当前页码
            let url = urlPattern();

            if (page > total) {
                page = total;
            }

            console.log('为您找到%d条记录，共%d页（每页显示%d条），当前为第%d页', count, total, size, page);

            let item = function (p) {
                let li = '';

                if (page === p) {
                    li = '<li class="page-item active"><a class="page-link" href="javascript:;">' + p + '</a></li>';
                } else {
                    li = '<li class="page-item"><a class="page-link" href="' + url.replace('{$page}', p) + '">' + p + '</a></li>';
                }

                return li;
            };

            let range = function (start, end) {
                let pagination = '';

                for (let p = start; p <= end; p++) {
                    pagination += item(p);
                }

                return pagination;
            }

            // 上一页
            let prev = function (p) {
                let li = '';

                if (p > 0) {
                    li = '<li class="page-item"><a class="page-link" href="' + url.replace('{$page}', p) + '">上一页</a></li>';
                }

                return li;
            };

            // 下一页
            let next = function (p) {
                let li = '';

                if (p <= total) {
                    li = '<li class="page-item"><a class="page-link" href="' + url.replace('{$page}', p) + '">下一页</a></li>';
                }

                return li;
            };

            // 首页
            let first = function () {
                let li = '';

                if (page !== 1) {
                    li = '<li class="page-item"><a class="page-link" href="' + url.replace('{$page}', 1) + '">首页</a></li>';
                }

                return li;
            };

            // 尾页
            let last = function () {
                let li = '';

                if (page !== total) {
                    li = '<li class="page-item"><a class="page-link" href="' + url.replace('{$page}', total) + '">尾页</a></li>';
                }

                return li;
            };

            let start = Math.max(page - Math.floor(max / 2), 1); // 计算出起始页码
            let end = Math.min(start + max - 1, total); // 计算出结束页码

            // 如果结束页码等于总页数，需要调整起始页码，使数字页码达到max个
            if (end === total) {
                start = Math.max(total - max + 1, 1);
            }

            // 页码数字部分
            let pagination = range(start, end);

            // 加上其它内容：首页、上一页、下一页、尾页
            pagination = first() + prev(page - 1) + pagination + next(page + 1) + last();

            $('ul.pagination').html(pagination);
        }
    }

    let size = 10; // 每页显示记录数（需传递给后端用于查询分页数据）

    // 这里假设通过AJAX请求获取到了分页相关数据
    let count = 1024; // 符合查询条件的记录总数

    pagination(count);
</script>
</body>
</html>