Question

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

有没有办法覆盖他们的CSS并在同一行显示它们？它们都在两个独立的div中。我已经添加了＆＃34; jquery.dataTables.min.css＆＃34;和＆＃34; bootstrap.min.css＆＃34;。

Answer 1

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

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

有关代码和演示的信息，请参阅this jsFiddle

Answer 2

编辑：啊，我意识到我无法回复评论中的评论，我希望OP可以看到这一点。

只需添加字符i作为信息

例如，如果你想让我在l之后，那就把它放在下面

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

否则你甚至可以让我拥有它自己的col-sm，如下所示（注意我减少了分页，p从8减到4，以便通过bootstrap标准适应12行'row'。

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

Answer 3

在bootstrap 4上我被 “语言”： { “ sProcessing”：“กำลังดำเนินการ...”， “ sLengthMenu”：“แสดง_MENU_แถว”， “ sZeroRecords”：“ไม่พบข้อมูล”， “ sInfo”：“แสดง START ถึง END จาก TOTAL แถว”， “ sInfoEmpty”：“แสดง0ถึง0จาก0แถว”， “ sInfoFiltered”：“（กรองข้อมูล MAX ทุกแถว）”， “ sInfoPostFix”：“”， “ sSearch”：“ค้นหา：”， “ sUrl”：“”， “ oPaginate”：{ “ sFirst”：“เิริ่มต้น”， “ sPrevious”：“ก่อนหน้า”， “ sNext”：“ถัดไป”， “ sLast”：“สุดท้าย” } }

Answer 4

只需按照以下添加新属性来覆盖 Datatable CSS 类 .dataTables_wrapper .dataTables_length。

.dataTables_wrapper .dataTables_length {
    white-space: nowrap;
}

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

4 个答案: