Отключить разбиение на страницы, если в данных есть только одна страница

Я внедряю 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;
}   

Надеюсь, это поможет вам всем