如何改变数据表的分页按钮的数量jQuery插件

Question

默认情况下，DataTables插件显示7个分页按钮(包括省略号)，如

以前

1 2 3 4 5 …10下一个

我希望能够将其更改为较小的数字，如

上一页1…10下一个

我在文档中找不到这个

我找到了这个插件，但是它说已弃用并且

DataTables 1.10内置了这个功能。

但是没有显示如何修改

Answer 1

我终于找到了DataTable的javascript对象和DataTables的源代码。

你必须添加这行(在初始化之前或之后):

$.fn.DataTable.ext.pager.numbers_length = 3;

注意这将显示为

上一页1…10下一个

和

以前

1 2 …10下一个

所以一定要在中包含中的省略号。

编辑:

在浏览页面时，我发现这个解决方案存在一些问题。

我必须重写他们的_numbers函数，像这样:

function _numbers(page, pages) {
    var
        numbers = [],
        buttons = 5, // added here the number of buttons
        half = Math.floor(buttons / 2);
    if(pages <= buttons) {
        numbers = _range(0, pages);
    } else if(page <= half) {
        numbers = _range(0, buttons - 2);
        numbers.push("ellipsis");
        numbers.push(pages - 1);
    } else if(page >= pages - 1 - half) {
        numbers = _range(pages - (buttons - 2), pages);
        numbers.splice(0, 0, "ellipsis");
        numbers.splice(0, 0, 0);
    } else {
        numbers.push(page); // changed this from _range(page - 1, page + 2);
        numbers.push("ellipsis");
        numbers.push(pages - 1);
        numbers.splice(0, 0, "ellipsis");
        numbers.splice(0, 0, 0);
    }
    numbers.DT_el = "span";
    return numbers;
}

并使用这个指向DataTables到我自己的函数:

$.fn.DataTable.ext.pager.simple_numbers = function(page, pages) {
    return ["previous", _numbers(page, pages), "next"];
};

同时，我必须将他们的_range函数复制到我的main.js文件中。

Answer 2

结合https://www.gyrocode.com/articles/jquery-datatables-pagination-without-ellipses/

在脚本加载后添加以下内容

<script>
    $.fn.DataTable.ext.pager.numbers_length = 3;
    $.fn.DataTable.ext.pager.full_numbers_no_ellipses = function (e, r) { var a = [], n = $.fn.DataTable.ext.pager.numbers_length, t = Math.floor(n / 2), l = function (e, r) { var a; void 0 === r ? (r = 0, a = e) : (a = r, r = e); for (var n = [], t = r; t < a; t++)n.push(t); return n }; return (a = r <= n ? l(0, r) : e <= t ? l(0, n) : e >= r - 1 - t ? l(r - n, r) : l(e - t, e + t + 1)).DT_el = "span", ["first", "previous", a, "next", "last"] };
</script>

Answer 3

显然，DataTableJS的理想最小值是:

$.fn.DataTable.ext.pager.numbers_length = 5;