如何在数据表的顶部同时获取条目数和搜索栏？

Posted 2023-03-14

【中文标题】如何在数据表的顶部同时获取条目数和搜索栏？

【英文标题】：How to take both number of enteries and search bar at the top in datatable?

【发布时间】：2021-02-28 17:01:01

【问题描述】：

我有数据表我关闭了它的分页现在我想显示总的输入。其中显示为Showing 0 to 0 of 0 entries 和顶部的搜索栏，但是当我在顶部输入全部内容时。搜索栏在底部下降

 $('#consignment_table').DataTable(
                        responsive: true,
                        "order": [],
                        "bSort": true,
                        scrollY: '50vh',
                        scrollX: true,
                        scrollCollapse: true,
                        "paging": false,
                        dom:'<"top"i>rt<"top"f><"clear">',

                        aLengthMenu: [
                            [-1],
                            ["All"]
                        ],
                        iDisplayLength: 5000
                    ).draw();

我想在顶部同时获取总输入和搜索栏

【问题讨论】：

您可以尝试以下方法吗：'ifrt'

是的，谢谢

【参考方案1】：

您好，在 Datatable 中使用 DOM 选项时，它会将您的搜索栏发送到底部。 所以你需要一些逻辑来在顶部显示搜索栏。

下面是函数

var dt;
$(document).ready(function() 
   dt= $('#example').DataTable( 
        responsive: true,
         dom:'<"top"i>rt<"top"f>',
         "paging": false,
     );
    setTimeout(adjustSearchbar,1200)
 );
function adjustSearchbar()
    var searchBar=$("#example_wrapper > .top:last")
   $("#example_wrapper").prepend(searchBar.clone());
   $('input[type="search"]').keyup(function()
      dt.search($(this).val()).draw() ;
)
  searchBar.hide()

这是一个有效的example。

但是你仍然需要一些 css 修复。 :)

【参考方案2】：

来自docs：

DataTables 会在表格周围添加一些元素 控制表格并显示有关它的附加信息。这 这些元素在屏幕上的位置由组合控制 它们在文档 (DOM) 中的顺序和应用于 元素。该参数用于控制它们的排序和 DOM 中围绕它们的附加标记。

l - 长度改变输入控件

f - 过滤输入

t - 桌子！

i - 表信息汇总

p - 分页控制

r - 处理显示元素

每个选项可以指定多次（除了 表本身），可用于在上面和 桌子下方。 DataTables 会自动同步这些 多个控件。

因此，t 之前的所有内容都将放在 dataTable 上方，而在它之后的所有内容都将放在 dataTable 下方，因此可以使用以下字符串实现所需的行为：ifrt

$('#consignment_table').DataTable(
    responsive: true,
    order: [],
    bSort: true,
    scrollY: '50vh',
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    dom: 'ifrt',
    aLengthMenu: [
        [-1],
        ["All"]
    ],
    iDisplayLength: 5000
).draw();