Skip to main content
 首页 » 编程设计

javascript之如果数据表中只有一页,则禁用分页

2024年04月12日8duanxz

我正在实现数据表,根据我的要求,除了分页问题之外,大多数事情都已解决。就我而言,每次显示分页导航时。如果只有一页,我想禁用分页导航。如何做到这一点?我的代码是这样的:

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> 

请您参考如下方法:

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

文档