如果数据表中只有一页，则禁用分页答案

【问题标题】：disable pagination if there is only one page in datatables如果数据表中只有一页，则禁用分页
【发布时间】：2012-06-18 12:47:00
【问题描述】：

我正在实现数据包，根据我的要求，除了分页问题之外，大部分问题都已解决。就我而言，每次显示分页导航。如果根本只有一页，我想禁用分页导航。怎么做？我的代码是这样的：

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>

【问题讨论】：

您是要禁用 (developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/…) 分页按钮，还是隐藏它们？下面的所有答案都隐藏/显示。

标签： javascript datatables pagination

【解决方案1】：

这不是直接可能的，因为 DataTables 不支持启用和禁用功能是运行时的。但是，您可以使用 fnDrawCallback() 函数检查是否只有一页，如果是则隐藏分页控件。

【讨论】：

【解决方案2】：

我认为你必须动态隐藏它们，你可以使用fnDrawCallback()

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

编辑 - 找到 here 的另一种方式可能是

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

【讨论】：

非常感谢。但我认为还有一个额外的括号“if($('#example tr').length
@Bappa 你应该从 oSettings 获取分页并动态设置值
请告诉如何从oSettings中获取并动态设置值
@Bappa 也许您可以简单地从执行分页的选择中获取它们 $('select[name=example_length]').val();
让我们continue this discussion in chat

【解决方案3】：

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

文档

【讨论】：

不应该是oSettings._iDisplayLength >= oSettings.fnRecordsDisplay() 吗？
如果您使用过滤器获取 1 页，则控件会按预期消失。但是，一旦您清除过滤器并最终得到超过一页，控件就不会重新出现。这可以通过在条件的 else 内的 JQuery 元素上调用 .show() 来解决。
@DmitryChornyi: >= 如果在 10 个结果页面大小上返回 10 个结果，则将显示导航。我们不希望它显示，除非有 page+1，所以 > 是正确的。
请将|| oSettings._iDisplayLength == -1 添加到您的if 子句中。所以你可以在lengthmenu 中使用'all' 选项，你也不需要分页。就像@OMG 所说，else 部分......另请参阅我的改进版本。
此代码已过时。请参阅我的answer，了解如何在 V1.10 中执行此操作

【解决方案4】：

将此代码添加到您的数据表初始化请求中。

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 以在站点范围内应用代码。

【讨论】：

【解决方案5】：

我知道这是一篇旧帖子，但对于我们这些将使用它并且像我一样患有强迫症的人来说，需要进行更改。

改变if语句，

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

到

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

通过这个小改动，您将看到记录长度大于 10、25、50、100 的分页按钮，而不是仅显示 10 条记录的分页按钮，从技术上讲，10、25 等记录仍然是一页视图。

【讨论】：

【解决方案6】：

我更喜欢@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();
        }
    }
});

【讨论】：

【解决方案7】：

查看我的功能插件conditionalPaging。

用法：

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

or

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

【讨论】：

为条件分页找到正确的 CDN 花了一分钟时间。在 DataTables 行话中，它不是一个常规的 Plugin，也不是一个 Extension，而是一个“功能插件”。也许这会为某人节省一分钟。这是功能插件 CDN 链接的当前链接cdn.datatables.net/plug-ins/1.10.19/features

【解决方案8】：

如果您的数据不是动态的，即服务器生成 HTML 表格，然后由 DataTables 增强，您可以在服务器上呈现分页选项（我使用的是剃须刀）。

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

【讨论】：

【解决方案9】：

只需将以下内容添加到您的样式表中：

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

【讨论】：

【解决方案10】：

你也可以这样做。

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

这对我有用。

【讨论】：

【解决方案11】：

这是在 V1.10+ 的 JQuery 数据表中工作时的正确方法。流程与之前的版本大致相同，但事件名称和 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);
    }
});

文档

【讨论】：

不那么容易阅读，但在一行中具有相同的功能： preDrawCallback: function (settings) { $(this).closest('.dataTables_wrapper').find('.dataTables_paginate').toggle ((新 $.fn.dataTable.Api(settings)).page.info().pages > 1); }
很好的解决方案！与fnDrawCallback 和css("display", "none") 解决方案不同，这在更改页面大小或过滤时也对我有用。不知道为什么会这样，但我想这是由于事件没有被触发。
为了隐藏 lengthMenu 我在最后使用了这个代码：$(this).closest('.dataTables_wrapper').find('.dataTables_length').toggle(settings.aLengthMenu[0][0] != -1 && settings.aLengthMenu[0][0] < api.page.info().recordsTotal);

【解决方案12】：

我尝试在每个条目的数据表中将 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();
        }
    });
},

【讨论】：

【解决方案13】：

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

    }
   });

【讨论】：

【解决方案14】：

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 Output View

【讨论】：

【解决方案15】：

此回调函数一般适用于任何数据表，无需对表 ID 进行硬编码：

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

【讨论】：

【解决方案16】：

这是我的解决方案，如果您在同一页面上有多个表格，它也可以工作。例如，它可以防止冲突（表 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();
        }
    }

【讨论】：

【解决方案17】：

这解决了我的问题：

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

希望对大家有帮助

【讨论】：

【解决方案18】：

我正在做以下事情来实现这个目标，因为它是上面没有表达的更动态的解决方案。首先它获取总页数，然后决定显示/隐藏分页。这段代码的美妙之处在于只有当用户更改页面长度时它才会生效。

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

【讨论】：

【解决方案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();
            }
        }
    });

【讨论】：

请解释一下您的代码。如果不确定，请阅读How to Answer

【解决方案20】：

这对我有用：

if ($('#dataTableId_paginate').find('li').length < 4) {
    $('#segment-list_paginate').html('');
}

【讨论】：