如果數據表中只有一頁，則禁用分頁

Question

我正在實施數據表，根據我的要求，除分頁問題外，大多數事情都已解決。 就我而言，每次顯示分頁導航時。 如果只有一頁，我想禁用分頁導航。怎么做？ 我的代碼是這樣的：

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>

Answer 1

根據 Nicola 的回答，您可以使用 fnDrawCallback() 回調和 oSettings 對象在繪制表格后隱藏表格分頁。 使用 oSettings，您無需了解有關表格設置的任何信息（每頁記錄數、特定於表格的選擇器等）

以下檢查每頁顯示長度是否大於總記錄，如果是，則隱藏分頁：

$('#your_table_selector').dataTable({
    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
            $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        } else {
             $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
        }
    }
});

文檔

• fnDrawCallback()
• o設置

Answer 2

我認為您必須動態隱藏它們，您可以使用fnDrawCallback()

$('#example').dataTable({
    "fnDrawCallback": function(oSettings) {
        if ($('#example tr').length < 11) {
            $('.dataTables_paginate').hide();
        }
    }
});​

編輯 - 在這里找到的另一種方法可能是

"fnDrawCallback":function(){
      if ( $('#example_paginate span span.paginate_button').size()) {
      $('#example_paginate')[0].style.display = "block";
     } else {
     $('#example_paginate')[0].style.display = "none";
   }
}

Answer 3

請參閱我的功能插件conditionalPaging 。

用法：

$('#myTable').DataTable({
    conditionalPaging: true
});

or

$('#myTable').DataTable({
    conditionalPaging: {
        style: 'fade',
        speed: 500 // optional
    }
});

Answer 4

這是在 JQuery Datatables V1.10+ 中工作的正確方法。 流程大體與之前版本相同，但事件名稱和 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);
    }
});

文檔

• https://datatables.net/reference/option/preDrawCallback
• https://datatables.net/reference/api/page.info()

Answer 5

將此代碼添加到您的數據表初始化請求中。

查詢

適用於單個數據表：

"fnDrawCallback": function (oSettings) {
  var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
  if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
    pgr.hide();
  } else {
    pgr.show()
  }
}

---

適用於所有數據表：

"fnDrawCallback": null 

編輯datatables.js以應用整個代碼站點。

Answer 6

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();
        }
    }
});

數據表輸出視圖

Answer 7

我正在執行以下操作以實現此目標，因為它是上面未表達的更動態的解決方案。 首先它獲取總頁數，然后決定顯示/隱藏分頁。 這段代碼的美妙之處在於，只有當用戶更改頁面長度時，它才不會受到影響。

jQuery('#example').DataTable({
    fnDrawCallback: function(oSettings) {
        var totalPages = this.api().page.info().pages;
        if(totalPages == 1){ 
            jQuery('.dataTables_paginate').hide(); 
        }
        else { 
            jQuery('.dataTables_paginate').show(); 
        }
    }
});

Answer 8

我更喜歡@sina 的解決方案。 做得好。

但是我的一個帶有一些必要的改進。 @sina 忘記了else部分以在需要時再次顯示分頁。 我添加了在lengthMenu定義all選項的可能性，如下所示：

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();
        }
    }
});

Answer 9

此回調函數一般適用於任何數據表，而無需對表 ID 進行硬編碼：

$('.data-table').dataTable({
    fnDrawCallback: function(oSettings) {
       if(oSettings.aoData.length <= oSettings._iDisplayLength){
         $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
       }
    }
});

Answer 10

我知道這是一篇舊帖子，但對於我們這些將使用它並且像我一樣有強迫症的人來說，需要進行更改。

更改 if 語句，

if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) 

到

if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) 

通過這個小改動，您將看到記錄長度大於 10、25、50、100 的分頁按鈕，而不是僅顯示 10 條記錄的分頁按鈕，技術上 10、25 等記錄仍然是一頁視圖。

Answer 11

只需將以下內容添加到您的樣式表中：

.dataTables_paginate .paginate_button.disabled {
    display: none;
}

Answer 12

你也可以按照這種方式。

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

這對我有用。

Answer 13

我試圖在每個條目的數據表中將 sPaginationType 設為 Dynamic，但我找不到合適的解決方案，但我所做的是

"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();
        }
    });
},

Answer 14

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

    }
   });

Answer 15

這不是直接可能的，因為 DataTables 不支持啟用和禁用功能是運行時。 但是，您可以使用 fnDrawCallback() 函數來檢查是否只有一頁，如果是，則隱藏分頁控件。

Answer 16

如果您的數據不是動態的，即，服務器生成 HTML 表，然后通過 DataTables 進行增強，您可以在服務器上呈現分頁選項（我正在使用 razor）。

$("#results").dataTable({
  paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
  // more ...
});

Answer 17

這是我的解決方案，如果您在同一頁面上有多個表，它也適用。 例如，它可以防止沖突（表 A 必須有分頁，而 B 不能）。

我的代碼中的 tableId 永遠不會是未定義的。 如果你還沒有為你的表定義一個 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();
        }
    }

Answer 18

這解決了我的問題：

.dataTables_paginate .disabled {
   display:none;
}   
dataTables_paginate .disabled + span {
   display:none;
}   

希望對大家有幫助

Answer 19

    $("#datatable").DataTable({
        "fnDrawCallback": function (oSettings) {
            if ($(oSettings.nTBody).find("tr").length < $(oSettings.nTableWrapper).find("select[name=fileList_length]").val()) {
                $(oSettings.nTableWrapper).children(".dataTables_paginate").hide();
            }
        }
    });