Скрыть LengthMenu из JQuery datatable
Как я могу скрыть LengthMenu (раскрывающийся список, который отображает количество записей, отображаемых на странице) из моего JQuery datatable?
В настоящее время я могу отключить его, но я не хочу, чтобы он вообще появлялся. Смотрите скрипку здесь
ниже: -
testdata = [{"id":"58","country_code":"UK"},{"id":"59","country_code":"US"}];
$('#test').dataTable({
"aaData": testdata,
"aoColumns": [
{ "mDataProp": "id" },
{ "mDataProp": "country_code" }
],
"bLengthMenu" : false, //thought this line could hide the LengthMenu
"bInfo":false,
});
`//the next 2 lines disables the LengthMenu
//var aLengthMenu = $('select[name=test_length]');
//$(aLengthMenu).prop('display', 'disabled');
Ответы
Ответ 1
Попробуйте
$('#test').dataTable({
"aaData": testdata,
"aoColumns": [
{ "mDataProp": "id" },
{ "mDataProp": "country_code" },
{ "mDataProp": "title" },
{ "mDataProp": "pubdate" },
{ "mDataProp": "url" }
],
"bLengthChange" : false, //thought this line could hide the LengthMenu
"bInfo":false,
});
Fiddle
Ответ 2
Сделайте это с помощью
"bLengthChange": false
Это скроет раскрывающееся окно длины.
Ответ 3
Вы можете сделать это, отключив разбивку на страницы:
"bPaginate": false
Ответ 4
Если использовать bootstrap или некоторые другие шаблоны, результат скрытия меню длины может стать немного уродливым, например, отсутствием границ.
Что сработало для меня, было использовать css и манипулировать тегом метки
.dataTables_length label { display:none;}
Ответ 5
Чтобы полностью отключить разбиение на страницы, выполните следующие действия:
"paging": false
Ответ 6
Если вы хотите скрыть разбиение на страницы и "Показывать X-записи", выберите значение ТОЛЬКО, когда строки данных могут помещаться на одной странице, вы можете использовать drawCallback
:
"drawCallback": function (settings) {
var api = this.api();
var totalRows = api.rows().data().length; //Get total rows of data
var rowPerPage = api.rows({ page: 'current' }).data().length; //Get total rows of data per page
if (totalRows > rowPerPage) {
//Show pagination and "Show X Entries" drop down option
$('div.dataTables_paginate')[0].style.display = "block";
$('div.dataTables_length')[0].style.display = "block";
} else {
//Hide it
$('div.dataTables_paginate')[0].style.display = "none";
$('div.dataTables_length')[0].style.display = "none";
}
}
В качестве альтернативы вы можете ссылаться на это обсуждение, совершенно аналогичный подход.