如何更改DataTables jQuery插件的分页按钮数量

Question

如何更改DataTables jQuery插件的分页按钮数量

jquerypaginationdatatables

19

默认情况下，DataTables插件显示7个分页按钮（包括省略号），如下所示：

Previous 1 2 3 4 5 ... 10 Next

我想将其更改为较小的数字，例如：

Previous 1 ... 10 Next

但是我在文档中找不到如何更改的信息。

我发现此插件，但它说它已弃用，而且

DataTables 1.10内置了此功能。

但它没有说明如何更改。

- Iulian Onofrei

你考虑使用PHP分页吗？ - Aviel Fedida

1

分页的数据是在 PHP 中完成的，问题是关于插件创建的界面。 - Iulian Onofrei

3个回答

1

将设置与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>

- Leandro Bardelli

1

非常感谢你，Leandro Bardelli。当我们一次性将所有记录提供给datatable时，它的效果非常好。顺便说一下，我正在使用DataTables 1.10.12版本。当我通过datatable的ajax方法从服务器端获取记录时，这个解决方案对我不起作用。你能否建议一下，当记录通过datatable的服务器端ajax方法获取时，我们该如何解决这个问题？谢谢。 - Kamlesh

1

Leandro Bardelli，我在调用datatable网格代码之前添加了您建议的<script>.....</script>代码。现在在两种情况下都可以正常工作：1）一次性提供所有记录给datatable；2）通过服务器端ajax渲染方法获取记录。非常感谢您 :) - Kamlesh

0

显然 DataTableJS 的最小理想值是：

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

- Ruben Hidalgo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Iulian Onofrei · Accepted Answer

在与 DataTable JavaScript 对象和 DataTables 源代码不断摆弄后，我终于找到了它。

您需要在初始化之前或之后添加此行：

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

注意，这将会显示为：

Previous 1 ... 10 Next

而不是

Previous 1 2 ... 10 Next

所以，请确保在长度数字中包含省略号。

编辑：

当翻页时，我发现了一些问题。

我必须像这样重写他们的_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文件中。