Я использую таблицы данных для своего проекта.
Я хочу установить пользовательскую позицию для своих фильтров, нумерации страниц и параметров поиска.Я использую Материал 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',
