在表格底部显示页长

Posted 2023-05-07

【中文标题】在表格底部显示页长

【英文标题】：Display page length at the bottom of table

【发布时间】：2011-03-08 21:20:58

【问题描述】：

全部，

我正在使用 Jquery 数据表。我正在使用以下示例：

DataTables with Pagination

我想知道是否有办法在底部而不是顶部显示“显示 10 个条目”。它应该显示在表格底部的“显示 1 到 10 个，共 51 个条目”之前。

我该怎么做？

谢谢

【参考方案1】：

这样做的方法是更改​​ .js 中的 sDom，您可以在其中定义表：

$('#TABLE_ID').dataTable(`
    "sDom": 'Rfrtlip'`    
 );

此外，您应该将 .css 更改为显示在“正在显示...条目”旁边，因为这样它会显示在其上方。

这是对 sDom 选项的解释：

允许以下选项：

'l' - 长度变化 'f' - 过滤输入 't' - 桌子！ 'i' - 信息 'p' - 分页 'r' - 处理中

允许使用以下常量：

'H' - jQueryUI 主题“标题”类（'fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix'） 'F' - jQueryUI 主题“页脚”类（'fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix'）

以下语法是预期的：

'' - div 元素 '' - 带有类的 div '' - 带有 ID 的 div 示例： '' 'ip>'

PS：这也可以帮助你：

datatables sDom

add-datatables-length-at-the-bottom-of-the-table

【讨论】：

Link-only answers are discouraged on Stack Overflow。请将相关信息直接添加到您的答案中。

谢谢，这是我的第一个答案 :) 我会记下

【参考方案2】：

有一个类似的问题（想删除一些不必要的控件），处理它的唯一方法似乎是自己修改表。我使用了 fnDrawCallback 回调 (http://datatables.net/usage/callbacks)。

在你的情况下会是这样的

$('#tableId').dataTable(
    "fnDrawCallback": function () 
        $('#tableId_info').prepend($('#tableId_length'));
    
);

只需检查该演示中生成的代码，它真的很简单（除了它没有格式或缩进）。

如果您不怕影响页面上的其他表格，您也可以使用类名而不是 id。它们的格式为dataTables_length。

使用 css 来增加样式。

【参考方案3】：

这是一个例子。这个文档很有帮助：https://datatables.net/release-datatables/examples/basic_init/dom.html

我的数据表是这样的：

我还必须在 css 中添加这一行：

.dataTables_length 
    margin-top: 10px;
    margin-left: 20px;

代码是：

  $('.data_table').DataTable(
            "iDisplayLength": 20,
            "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
            "pagingType": "simple_numbers",
            "language": 
                searchPlaceholder: "Search",
                search: "",

            ,
            "dom": '<"top"f>rt<"bottom"ilp><"clear">'
        );