设置Datables长度菜单的自定义位置

时间:2019-01-28 07:00:49

标签: jquery datatables bootstrap-4 material-design datatables-1.10

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

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

现在,我想将我的长度菜单放置在这张照片下面的桌子下方。

I want it like this

所以我尝试使用此代码:

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

Edited Code

1 个答案:

答案 0 :(得分:1)

尝试这个:

它在左上方显示按钮,在右上方显示搜索,在左下方显示每页,在中间下方显示表格信息,在右下方显示分页。

enter image description here

对于Bootstrap v3:

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

对于引导程序v4:

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

Demo