如何限制Bootstrap 4 DataTables分页的页码选项

要实现精简的分页页码显示（仅展示当前页附近的页码、首尾页及省略号），可以通过配置DataTables的核心参数来实现：

1. 快速实现精简分页
   在初始化DataTables时，添加pagingType: "ellipses"参数，这是最直接的方式：

$('#your-table-id').DataTable({
    paging: true,
    pagingType: "ellipses", // 关键配置，自动生成带省略号的精简页码
    pageLength: 10, // 每页默认显示条数
    lengthChange: false, // 可选：隐藏每页条数选择框
    language: {
        paginate: {
            first: "首页",
            last: "末页",
            next: "下一页",
            previous: "上一页"
        }
    }
});

2. 其他分页样式可选
   如果需要不同的分页布局，还可以选择以下pagingType值：

• "simple_numbers"：仅显示上一页、当前附近页码、下一页
• "full_numbers"：显示完整控件（首页、上一页、页码、下一页、末页），但页码过多时会全部展示
• "first_last_numbers"：固定显示首页、末页及当前附近页码

3. 精确控制页码数量（进阶）
   如果要手动指定显示的页码范围，可结合drawCallback回调函数调整：

$('#your-table-id').DataTable({
    paging: true,
    pagingType: "full_numbers",
    drawCallback: function() {
        var api = this.api();
        var currentPage = api.page() + 1; // 当前页（从1开始计数）
        var totalPages = api.page.info().pages;
        var $pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
        
        // 只保留首尾页、当前页前后1页的按钮
        $pagination.find('a').each(function() {
            var btnPage = parseInt($(this).text());
            if (btnPage !== 1 && btnPage !== totalPages && Math.abs(btnPage - currentPage) > 1) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    }
});

配置完成后，分页区域会呈现你期望的精简样式，避免因页码过多导致布局拥挤。

内容的提问来源于stack exchange，提问作者Fayyaz Developer