在同一行 jquery dataTables 中显示页长和分页

Posted 2023-05-07

【中文标题】在同一行 jquery dataTables 中显示页长和分页

【英文标题】：Display page length and pagination in the same line jquery dataTables

【发布时间】：2016-10-03 08:23:01

【问题描述】：

有没有办法在同一行显示页面长度选项和分页选项？我就是这样得到的：

有没有办法覆盖他们的 css 并将它们显示在同一行？它们都在两个单独的 div 中。我添加了“jquery.dataTables.min.css”和“bootstrap.min.css”。

【参考方案1】：

使用dom 选项构造Bootstrap 框架的布局。

var table = $('#example').DataTable(
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'l><'col-sm-8'p>>"
);

见this jsFiddle代码和演示

【讨论】：

这很好用而且很棒。您如何将信息放在它们之间？？

【参考方案2】：

edit：啊，我意识到我无法回复评论中的 cmets，我希望 OP 能看到这一点。

只需添加字符 i 即可获得信息

例如，如果你想在 l 之后有 i，那么如下所示

var table = $('#example').DataTable(
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'li><'col-sm-8'p>>"
);

否则，您甚至可以让我拥有自己的 col-sm，如下所示（请注意，我将分页 p 从 8 减少到 4，以适应引导标准的 12 个“行”划分。

var table = $('#example').DataTable(
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>"
);

【参考方案3】：

在引导程序 4 上，我覆盖了 “语言”： "sProcessing": "กำลังดำเนินการ...", "sLengthMenu": "แสดง_MENU_ แถว", "sZeroRecords": "ไม่พบข้อมูล", "sInfo": "แสดง START ถึง END จาก TOTAL แถว", "sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 แถว", "sInfoFiltered": "(กรองข้อมูล MAX ทุกแถว)", "sInfoPostFix": "", "sSearch": "ค้นหา:", “网址”：“”， “分页”： "sFirst": "เิริ่มต้น", "sPrevious": "ก่อนหน้า", "sNext": "ถัดไป", “sLast”：“สุดท้าย” ,

【参考方案4】：

只需通过添加新属性来覆盖 Datatable CSS 类 .dataTables_wrapper .dataTables_length，如下所示。

.dataTables_wrapper .dataTables_length 
    white-space: nowrap;