Отключить разбиение на страницы, если в данных есть только одна страница
Я внедряю datatbales и, согласно моему требованию, большинство вещей были устранены, кроме проблемы с разбивкой по страницам. В моем случае для каждого отображения навигации по страницам. Я хочу отключить навигацию по страницам, если есть только одна страница. Как это сделать? Мой код похож:
JS
<script>
function fnFilterColumn(i) {
$('#example').dataTable().fnFilter(
$("#col" + (i + 1) + "_filter").val(),
i
);
}
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "datatable-interestdb.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Save to CSV"
}
]
},
"oLanguage": {
"sSearch": "Search all columns:"
}
});
$("#example").dataTable().columnFilter({
aoColumns: [
null,
null,
null,
null
]
});
$("#col1_filter").keyup(function() {
fnFilterColumn(0);
});
});
</script>
HTML
<table cellpadding="3" cellspacing="0" border="0" class="display userTable" aria-describedby="example_info">
<tbody>
<tr id="filter_col1">
<td>Interest:</td>
<td>
<input type="text" name="col1_filter" id="col1_filter">
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" class="form_table display" id="example">
<thead>
<tr>
<th class="sorting_asc" width="25%">Interest</th>
<th width="25%">Name</th>
<th width="25%">Email</th>
<th width="25%">Contact No</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
Ответы
Ответ 1
Вы должны скрыть их динамически, я думаю, вы можете использовать fnDrawCallback()
$('#example').dataTable({
"fnDrawCallback": function(oSettings) {
if ($('#example tr').length < 11) {
$('.dataTables_paginate').hide();
}
}
});
EDIT - другой способ найден здесь может быть
"fnDrawCallback":function(){
if ( $('#example_paginate span span.paginate_button').size()) {
$('#example_paginate')[0].style.display = "block";
} else {
$('#example_paginate')[0].style.display = "none";
}
}
Ответ 2
Построение ответа Nicola, вы можете использовать обратный вызов fnDrawCallback() и объект oSettings, чтобы скрыть разбиение на страницы после его рисования. С помощью oSettings вам не нужно ничего знать о настройках таблицы (записи на странице, селектора, специфичные для таблицы, и т.д.).
Следующие проверки, чтобы увидеть, превышает ли длина отображения каждой страницы, чем общие записи, и скрывает разбиение на страницы, если это:
$('#your_table_selector').dataTable({
"fnDrawCallback": function(oSettings) {
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
Документация
Ответ 3
Смотрите мой плагин с функциями conditionalPaging.
Использование:
$('#myTable').DataTable({
conditionalPaging: true
});
or
$('#myTable').DataTable({
conditionalPaging: {
style: 'fade',
speed: 500 // optional
}
});
Ответ 4
Это правильный подход при работе в V1. 10+ JQuery Datatables. Процесс обычно такой же, как и в предыдущих версиях, но имена событий и методы API немного отличаются:
$(table_selector).dataTable({
preDrawCallback: function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
Документация
Ответ 5
Используя предложение @sina, включая исправление, упомянутое @GuiSim.
Добавьте этот код в запрос инициализации данных.
JQuery
"fnDrawCallback": function (oSettings) {
var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
pgr.hide();
} else {
pgr.show()
}
}
Или лучше поменять
"fnDrawCallback": null
в вашем datatables.js, чтобы применить кодовый сайт в целом.
Ответ 6
Я предпочитаю решение @sina. Хорошая работа.
Но у меня есть некоторые необходимые улучшения.
@sina забыли часть else, чтобы снова показать разбивку на страницы, если это необходимо. И я добавил возможность определить параметр all в lengthMenu следующим образом:
jQuery('#your_table_selector').dataTable({
"lengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],
"fnDrawCallback": function(oSettings) {
if (oSettings._iDisplayLength == -1
|| oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
{
jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
} else {
jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').show();
}
}
});
Ответ 7
Эта функция обратного вызова работает в общем случае с любым типом данных без необходимости жесткого кодирования идентификатора таблицы:
$('.data-table').dataTable({
fnDrawCallback: function(oSettings) {
if(oSettings.aoData.length <= oSettings._iDisplayLength){
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
Ответ 8
Просто добавьте следующее в таблицу стилей:
.dataTables_paginate .paginate_button.disabled {
display: none;
}
Ответ 9
Вы также можете следовать этому пути.
"fnDrawCallback":function(){
if(jQuery('table#table_id td').hasClass('dataTables_empty')){
jQuery('div.dataTables_paginate.paging_full_numbers').hide();
} else {
jQuery('div.dataTables_paginate.paging_full_numbers').show();
}
}
Это сработало для меня.
Ответ 10
Я попытался сделать sPaginationType как Dynamic в datatable для каждой записи, но я не могу найти подходящее решение для этого, но я сделал это
"fnDrawCallback": function(oSettings) {
$('select[name="usertable_length"]').on('change', function(e) {
var valueSelected = this.value;
if ( valueSelected < 10 ) {
$('.dataTables_paginate').hide();
} else {
$('.dataTables_paginate').show();
}
});
},
Ответ 11
$('#dataTable_ListeUser').DataTable( {
//usual pager parameters//
"drawCallback": function ( settings ) {
/*show pager if only necessary
console.log(this.fnSettings());*/
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('#dataTable_ListeUser_paginate').css("display", "block");
} else {
$('#dataTable_ListeUser_paginate').css("display", "none");
}
}
});
Ответ 12
JQuery
- Я пробовал со следующими параметрами, он работал у меня
$("#your_tbl_selector").dataTable({
"pageLength": 3,
"autoWidth": false,
"fixedHeader": {"header": false, "footer": false},
"columnDefs": [{ "width": "100%", "targets": 0 }],
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"oLanguage": {
"oPaginate": {
"sNext": "",
"sPrevious": ""
}
},
"fnDrawCallback": function(oSettings) {
if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) {
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
Результат вывода DataTable
Ответ 13
Я делаю следующее для достижения этой цели, так как это более динамичное решение, которое не выражено выше. вначале он получает общее количество страниц, а затем решает показать/скрыть нумерацию страниц. Красота этого кода только в том случае, если пользователь изменит длину страницы, это не повлияет.
jQuery('#example').DataTable({
fnInfoCallback: function(oSettings) {
var totalPages = this.api().page.info().pages;
if(totalPages == 1){
jQuery('.dataTables_paginate').hide();
}
else {
jQuery('.dataTables_paginate').show();
}
}
});
Ответ 14
Это невозможно, так как DataTables не поддерживает функции включения и отключения, это время выполнения. Однако, что вы можете сделать, это использовать функцию fnDrawCallback(), чтобы проверить, есть ли только одна страница, и если это скрыть элементы управления разбиением на страницы.
Ответ 15
Я знаю, что это старый пост, но для тех из нас, кто будет использовать это, и иметь OCD, как и я, требуется изменение.
Измените оператор if,
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
to
if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay())
С помощью этого небольшого изменения вы увидите кнопки с разбивкой по страницам для длин записей более 10, 25, 50, 100 вместо того, чтобы отображать кнопки разбиения на страницы только 10 записей, технически 10, 25 и т.д. записи по-прежнему представляют собой одностраничный вид.
Ответ 16
Если ваши данные не являются динамическими, т.е. сервер генерирует таблицу HTML, которая затем расширяется с помощью DataTables, вы можете отобразить опцию подкачки на сервере (я использую бритву).
$("#results").dataTable({
paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
// more ...
});
Ответ 17
Вот мое решение, оно работает также, если у вас несколько таблиц на одной странице. Например, это предотвращает сборку (таблица A должна иметь разбивку на страницы, а B не должна).
tableId в моем коде никогда не undefined. Если вы не определили ID для своей таблицы, DataTable сделает это за вас, добавив что-то вроде DataTables_Table_0 '
fnDrawCallback: function (oSettings) {
if ($(this).DataTable().column(0).data().length <= oSettings._iDisplayLength) {
var tableId = $(this).attr('id');
$('#' + tableId + '_paginate').hide();
}
}
Ответ 18
Это решило мои проблемы:
.dataTables_paginate .disabled {
display:none;
}
dataTables_paginate .disabled + span {
display:none;
}
Надеюсь, это поможет вам всем
