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

Question

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

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

现在我想将我的长度菜单放在 table 下面，如图所示。

所以我尝试使用此代码：

$('#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

试试这个：

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

对于 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

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

Set Custom Position of Datables Length Menu

jquery

datatables

bootstrap-4

material-design

datatables-1.10