在表格底部显示页长答案

【问题标题】：Display page length at the bottom of table在表格底部显示页长
【发布时间】：2011-03-08 21:20:58
【问题描述】：

全部，

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

DataTables with Pagination

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

我该怎么做？

谢谢

【问题讨论】：

标签： javascript jquery jquery-ui pagination datatables

【解决方案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">'
        });

【讨论】：