jQuery 数据表更改分页按钮的数量

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24383805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:32:05  来源:igfitidea点击:

DataTables change number of pagination buttons

jquerypaginationdatatables

提问by Iulian Onofrei

By default, DataTablesplugin shows 7 paging buttons (including the ellipses)like

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

Previous12345...10Next

Previous12345...10Next

I would like to be able to change this to a smaller number like

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

Previous1...10Next

Previous1...10Next

and I can't find this anywhere in the documentation.

我在文档中的任何地方都找不到这个。

I found this pluginbut it says that's deprecatedand that the

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

DataTables 1.10 has this ability built in.

DataTables 1.10 内置了此功能。

but it doesn't show where to change this.

但它没有显示在哪里改变这一点。

回答by Iulian Onofrei

I finally found it after fiddling with the DataTablejavascript object and the DataTables' source code.

在摆弄DataTablejavascript 对象和DataTables' 源代码后,我终于找到了它。

You have to add this line (either before or after initialization):

您必须添加此行(在初始化之前或之后)

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

Notethat this will show up like

请注意,这将显示为

Previous1...10Next

Previous1...10Next

and not

并不是

Previous12...10Next

Previous12...10Next

so be sure to includethe ellipses in the length number.

所以一定要在长度数字中包含省略号。

Edit:

编辑:

I saw some problems with this solution when advancing through the pages.

在浏览页面时,我发现此解决方案存在一些问题。

I had to rewrite their _numbersfunction like this:

我不得不_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;
}

And used this to point out DataTablesto my own function:

并用它来指出DataTables我自己的功能:

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

Also, I had to copy their _rangefunction into my main.jsfile.

另外,我必须将它们的_range功能复制到我的main.js文件中。

回答by Ruben Hidalgo

apparently the ideal minimum for DataTableJS is:

显然 DataTableJS 的理想最小值是:

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