jquery - 设置数据表长度菜单的自定义位置

Question

我正在为我的项目使用数据表。

我想为我的过滤器、分页和搜索选项设置自定义位置。 我正在使用Material MDB Pro对于我的 CSS。

现在我想将长度菜单放置在表格下方，如下图所示。

所以我尝试使用这段代码:

$('#example').DataTable( {
        "dom": '<"top"i>rt<"bottom"flp><"clear">'
    } );

但这会让一切都崩溃。甚至搜索!我想将“搜索”和“导出”按钮保留在顶部，仅将分页和长度菜单保留在下方。

我的代码是:

$(document).ready(function () {
  var table = $('#dtMaterialDesignExample').DataTable({
    "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
      dom: 'Blfrtip',
      fixedHeader: true,
        buttons: [
            {
                extend: 'csvHtml5',
                title: 'bizRTC CDR <?php date('d-m-Y'); ?>',
                 customize: function (csv) {
                     return "Enjoy the file"+csv;
                  },
                   className: 'btn btn-outline-primary waves-effect space',
            },
            {
            extend: 'pdfHtml5',
            title: 'CDR <?php echo date('d-m-Y'); ?>',
            customize: function ( doc ) {
                            doc.content.splice( 0, 0, {
                                text: "bizRTC CDR"
                            } );
            },
            className: 'btn btn-outline-primary waves-effect space',
            },
            {
                extend: 'excelHtml5',

                title: 'bizRTC CDR <?php date('d-m-Y'); ?>',
                message: "Call Records",
                className: 'btn btn-outline-primary waves-effect space',


            },
        ],

      responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                } )
            }
        },
        "drawCallback": function () {
            $('.dataTables_paginate > .pagination').addClass('pagination pagination-circle pg-blue mb-0');
        }
});

编辑 1:

在我的代码中添加以下内容后:

dom: '<"row"<"float-left"B><"float-right"f>><"row"<"float-left"i><"float-right"p>>rtlp',

Answer 1

试试这个:

它在左上角显示按钮，在右上角显示搜索，在左下角显示每页，在底部中间显示表格信息，在右下角显示分页。

对于 Bootstrap v3:

dom: '<"pull-left"B><"pull-right"f>rt<"row"<"col-sm-4"l><"col-sm-4"i><"col-sm-4"p>>'

对于 Bootstrap v4:

dom: '<"float-left"B><"float-right"f>rt<"row"<"col-sm-4"l><"col-sm-4"i><"col-sm-4"p>>'

Demo