我正在为项目使用数据表。
我想为我的过滤器,分页和搜索选项设置自定义位置。 我的CSS使用Material MDB Pro。
现在,我想将我的长度菜单放置在这张照片下面的桌子下方。
所以我尝试使用此代码:
$('#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',
答案 0 :(得分:1)
尝试这个:
它在左上方显示按钮,在右上方显示搜索,在左下方显示每页,在中间下方显示表格信息,在右下方显示分页。
对于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>>'