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

尤利安·奥诺夫雷(Iulian Onofrei)

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

Previous 1 2 3 4 5 ... 10 Next

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

Previous 1 ... 10 Next

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

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

DataTables 1.10具有内置的此功能。

但没有显示在何处更改此设置。

尤利安·奥诺夫雷(Iulian Onofrei)

摆弄DataTablejavascript对象和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文件中。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在jQuery Bootstrap DataTables插件中居中分页?

来自分类Dev

jQuery DataTables插件单击按钮

来自分类Dev

如何更改特定的jQuery dataTables单元格值

来自分类Dev

jQuery DataTables RowReordering插件-发生更改事件?

来自分类Dev

如何限制cakephp分页中显示的按钮数量

来自分类Dev

如何捕获使用DataTables插件分页的复选框的值

来自分类Dev

jQuery Validate插件更改提交按钮CSS

来自分类Dev

使用jquery定义如何在基于datatables插件的网格中添加自定义链接按钮

来自分类Dev

jQuery dataTables更改输入搜索

来自分类Dev

jQuery Datatables分页设置

来自分类Dev

根据另一个TD元素,如何更改JQuery Datatables TD元素中的图标?

来自分类Dev

如何删除jQuery DataTables分页中的省略号?

来自分类Dev

如何禁用DataTables / TableTools按钮

来自分类Dev

如何暂停和重新启动jQuery datatables插件

来自分类Dev

分页-jQuery DataTables中的上一个和下一个大小按钮

来自分类Dev

为什么我的jQuery DataTables没有必要的分页按钮?

来自分类Dev

jQuery:Datatables.net基于不同的过滤器更改分页类型

来自分类Dev

如何更改pnotify Jquery插件的默认宽度?

来自分类Dev

如何向WebUI-Popover jQuery插件添加确认按钮?

来自分类Dev

更改事件会导致内存泄漏,每次新的JQuery插件DataTables都会加载

来自分类Dev

jQuery DataTables按钮

来自分类Dev

使用DataTables插件的服务器端分页

来自分类Dev

如何禁用DataTables中的TableTools按钮?

来自分类Dev

如何为 DataTables 中的按钮分配 ID?

来自分类Dev

更改WordPress插件的按钮颜色

来自分类Dev

使用ajax + jQuery分页时如何更改URL路径

来自分类Dev

如何更改jQuery按钮图标

来自分类Dev

如何使jQuery识别单选按钮更改

来自分类Dev

如何使用jQuery自动更改按钮文本?

Related 相关文章

  1. 1

    如何在jQuery Bootstrap DataTables插件中居中分页?

  2. 2

    jQuery DataTables插件单击按钮

  3. 3

    如何更改特定的jQuery dataTables单元格值

  4. 4

    jQuery DataTables RowReordering插件-发生更改事件?

  5. 5

    如何限制cakephp分页中显示的按钮数量

  6. 6

    如何捕获使用DataTables插件分页的复选框的值

  7. 7

    jQuery Validate插件更改提交按钮CSS

  8. 8

    使用jquery定义如何在基于datatables插件的网格中添加自定义链接按钮

  9. 9

    jQuery dataTables更改输入搜索

  10. 10

    jQuery Datatables分页设置

  11. 11

    根据另一个TD元素,如何更改JQuery Datatables TD元素中的图标?

  12. 12

    如何删除jQuery DataTables分页中的省略号?

  13. 13

    如何禁用DataTables / TableTools按钮

  14. 14

    如何暂停和重新启动jQuery datatables插件

  15. 15

    分页-jQuery DataTables中的上一个和下一个大小按钮

  16. 16

    为什么我的jQuery DataTables没有必要的分页按钮?

  17. 17

    jQuery:Datatables.net基于不同的过滤器更改分页类型

  18. 18

    如何更改pnotify Jquery插件的默认宽度?

  19. 19

    如何向WebUI-Popover jQuery插件添加确认按钮?

  20. 20

    更改事件会导致内存泄漏,每次新的JQuery插件DataTables都会加载

  21. 21

    jQuery DataTables按钮

  22. 22

    使用DataTables插件的服务器端分页

  23. 23

    如何禁用DataTables中的TableTools按钮?

  24. 24

    如何为 DataTables 中的按钮分配 ID?

  25. 25

    更改WordPress插件的按钮颜色

  26. 26

    使用ajax + jQuery分页时如何更改URL路径

  27. 27

    如何更改jQuery按钮图标

  28. 28

    如何使jQuery识别单选按钮更改

  29. 29

    如何使用jQuery自动更改按钮文本?

热门标签

归档