如何更改DataTables jQuery插件的分页按钮数量 [英] How to change the number of pagination buttons of the DataTables jQuery plugin

问题描述

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

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

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

上一个 1 ... 10 下一个

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

我发现了这个插件，但它说它已弃用并且><块引用>

DataTables 1.10 内置了此功能.

但它没有显示在哪里更改.

解决方案

在摆弄 DataTable javascript 对象和 DataTables 的源代码后，我终于找到了它.

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

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

注意这会显示为

上一个 1 ... 10 下一个

而不是

上一个 1 2 ... 10 下一个

所以一定要包括长度数字中的省略号.

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

我不得不像这样重写他们的 _numbers 函数:

function _numbers(page, pages) {无功数字 = [],button = 5,//这里添加了按钮的数量half = Math.floor(buttons/2);如果(页面 <= 按钮){数字 = _range(0, 页);} else if(page <= half) {数字 = _range(0, 按钮 - 2);numbers.push("省略号");numbers.push(pages - 1);} else if(page >= pages - 1 - half) {数字 = _range(pages - (buttons - 2), pages);numbers.splice(0, 0, "省略号");numbers.splice(0, 0, 0);} 别的 {numbers.push(page);//从 _range(page - 1, page + 2);numbers.push("省略号");numbers.push(pages - 1);numbers.splice(0, 0, "省略号");numbers.splice(0, 0, 0);}numbers.DT_el = "span";返回数字；}

并用它向我自己的函数指出DataTables:

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

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

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

Previous 1 2 3 4 5 ... 10 Next

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

Previous 1 ... 10 Next

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

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

DataTables 1.10 has this ability built in.

but it doesn't show where to change this.

解决方案

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;

Note that this will show up like

Previous 1 ... 10 Next

and not

Previous 1 2 ... 10 Next

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

Edit:

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

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;
}

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"];
};

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

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