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

Question

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

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

Answer 1

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

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

有关代码和演示,请参阅此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>>"
});