DataTable: как скрыть разбиение на страницы и показывать только по мере необходимости?

Ответ 1

Используйте drawCallback для обработки DT draw события и отображения/скрытия управления разбивкой на страницы на доступных страницах:

$('#table_id').dataTable({
  drawCallback: function(settings) {
    var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
    pagination.toggle(this.api().page.info().pages > 1);
  }
})

Ответ 2

  $('#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");
        }

        }
       });

Ответ 3

Используйте "drawCallback" для решения этой проблемы.

1. На веб-странице используйте инструмент разработчика для проверки "предыдущей" кнопки, затем вы найдете элемент div, который обертывает кнопки "предыдущий" и "следующий". DataTables автоматически присваивает id этому элементу на основе идентификатора элемента таблицы html.

Например, у меня есть таблица с id 'Atable'. В этой таблице DataTables автоматически создавал элемент div с идентификатором "Atable_paginate" для обертывания предыдущей и следующей кнопок.

2.For drawCallback, мы пишем функцию, которая проверяет, есть ли менее 1 страницы, если это так, мы скрываем элемент, используя id.

Например, вы установили, что на одной странице есть 20 записей на

pageLength: 20,

что означает, что если осталось менее 20 записей, нам не нужно отображать кнопки "предыдущий" и "следующий". Поэтому мы пишем, как показано ниже,

drawCallback: function(settings){
    if($(this).find('tbody tr').length <= 20){
        $('#Atable_paginate').hide();
    }
}

3. Инициализация Atable должна быть как ниже

var table = $('#Atable').DataTable({
    pageLength: 20,
    lengthChange: false,
    drawCallback: function(settings){   
        if($(this).find('tbody tr').length <= 20){
            $('#Atable_paginate').hide();
        }
    }
});

4.Если на веб-странице есть несколько таблиц, примените этот метод к каждой таблице.

Ответ 4

$(this) не работал у меня, возможно потому, что я использую TypeScript. Поэтому я использовал другой подход, чтобы получить элемент JQuery для оболочки таблицы и API DataTables. Это было вызвано ответом BitOfUniverse и проверено с помощью DataTables 1.10.

TypeScript:

'drawCallback': (settings: any) => {
      // hide pager and info if the table has NO results
      const api = new $.fn.dataTable.Api(settings);
      const pageCount = api.page.info().pages;

      const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
      const pagination = wrapper.find('.dataTables_paginate');
      const info = wrapper.find('.dataTables_info');

      pagination.toggle(pageCount > 0);
      info.toggle(pageCount > 0);
 }

Ответ 5

Вы можете использовать метод fnDrawCallback(), чтобы скрыть pagination в dataTable.

var oTable = $('#datatable_sample').dataTable({
    "iDisplayLength": 10,    
    "fnDrawCallback": function(oSettings) {
        if ($('#datatable_sample tr').length < 10) {
            $('.dataTables_paginate').hide();
        }
    }
});​

Длина, которую вы можете определить по строке, которую вы хотите отобразить в списке.

Ответ 6

Вы можете указать параметры, когда создаете свои данные в Javascript

$('.examples').DataTable({ "paging": false });

Все параметры перечислены здесь: http://www.datatables.net/reference/option/