如果数据表中只有一个页面，则禁用分页

我正在实施数据库，根据我的要求，除了分页问题外，大部分的事情都已经解决了。 在我的情况下，每次分页导航显示。 如果只有一个页面，我想禁用分页导航。怎么做？ 我的代码是这样的：

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

你必须dynamic地隐藏它们我想，你可以使用fnDrawCallback()

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

编辑 – 在这里find的另一种方式可能是

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

Answer 2

基于Nicola的回答，您可以使用fnDrawCallback（）callback函数和oSettings对象在绘制完成后隐藏表格分页。 使用oSettings，你不需要知道任何有关表设置（每页logging，特定于表的select器等）

以下内容将检查每页显示长度是否大于总logging，并且如果是，则隐藏分页：

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

文档

• fnDrawCallback（）
• oSettings

Answer 3

查看我的function插件conditionalPaging 。

用法：

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

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

文档

• https://datatables.net/reference/option/preDrawCallback
• https://datatables.net/reference/api/page.info（）;

Answer 5

使用上面的@sinabuild议，包括@GuiSim提到的修复 。

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

JQUERY

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

还是更好还是replace

 "fnDrawCallback": null 

在你的datatables.js中应用广泛的代码。

Answer 6

我更喜欢@新浪的解决scheme。 做得好。

但我的一个有一些必要的改进。 @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 7

这不是直接可能的，因为DataTables不支持启用和禁用function的运行时间。 然而，你可以做的是利用fnDrawCallback（）函数来检查是否只有一个页面，如果是这样，隐藏分页控件。

Answer 8

这个callback函数可以和任何数据表一般工作，而不必硬编码表ID：

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

Answer 9

如果你的数据不是dynamic的，也就是说，服务器生成的HTML表格，然后由DataTables增强，你可以在服务器上呈现分页选项（我使用的是razor）。

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

Answer 10

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

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

Answer 11

我知道这是一个旧的职位，但对于我们这些将使用这个，并有像我一样的强迫症，需要改变。

更改if语句，

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

至

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

有了这个小改动，你将看到分页button的logging长度大于10，25，50，100，而不是分页button只有10条logging，技术上10,25等logging仍然是一个页面视图。

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数据表中的每个条目，但我找不到适当的解决scheme，但我做的是

 "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

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 16

这是我的解决scheme，如果在同一页面上有多个表格，它也可以工作。 它防止例如（表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 17

我已经使用这个代码：

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

哪个解决了我的问题:)希望它有帮助