数据表更改分页按钮的数量 [英] DataTables change number of pagination buttons

问题描述

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

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

上一页 1 2 3 4 5 ... 10 下一页

我想要能够更改这样一个较小的数字，如

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

上一页 1 ... 10 下一页

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

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

我发现此插件，但它表示这是已弃用，而

I found this plugin but it says that's deprecated and that the

数据表1.10内置此功能。

DataTables 1.10 has this ability built in.

but it doesn't show where to change this.

推荐答案

我终于找到了， $ c> DataTable javascript对象和 DataTables 'sou rce代码。

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

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

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

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

注意，这将显示为

上一页 1 ... 10 下一页

而不是

上一页 1 2 ... 10 下一页

所以请确定包含长度号码中的省略号。

so be sure to include the ellipses in the length number.

编辑：

我在浏览页面时看到了这个解决方案的一些问题。

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

我不得不重写他们的 _numbers 函数如下：

I had to rewrite their _numbers function like this:

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 到我自己的功能：

And used this to point out DataTables to my own function:

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

另外，我不得不复制他们的 _range 函数到我的 main.js 文件。

Also, I had to copy their _range function into my main.js file.

这篇关于数据表更改分页按钮的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！