[英]disable pagination if there is only one page in datatables
我正在实施数据表,根据我的要求,除分页问题外,大多数事情都已解决。 就我而言,每次显示分页导航时。 如果只有一页,我想禁用分页导航。怎么做? 我的代码是这样的:
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();
}
}
});
文档
我认为您必须动态隐藏它们,您可以使用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";
}
}
请参阅我的功能插件conditionalPaging 。
用法:
$('#myTable').DataTable({
conditionalPaging: true
});
or
$('#myTable').DataTable({
conditionalPaging: {
style: 'fade',
speed: 500 // optional
}
});
这是在 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);
}
});
将此代码添加到您的数据表初始化请求中。
查询
适用于单个数据表:
"fnDrawCallback": function (oSettings) {
var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
pgr.hide();
} else {
pgr.show()
}
}
适用于所有数据表:
"fnDrawCallback": null
编辑datatables.js
以应用整个代码站点。
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();
}
}
});
我正在执行以下操作以实现此目标,因为它是上面未表达的更动态的解决方案。 首先它获取总页数,然后决定显示/隐藏分页。 这段代码的美妙之处在于,只有当用户更改页面长度时,它才不会受到影响。
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();
}
}
});
我更喜欢@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();
}
}
});
此回调函数一般适用于任何数据表,而无需对表 ID 进行硬编码:
$('.data-table').dataTable({
fnDrawCallback: function(oSettings) {
if(oSettings.aoData.length <= oSettings._iDisplayLength){
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
我知道这是一篇旧帖子,但对于我们这些将使用它并且像我一样有强迫症的人来说,需要进行更改。
更改 if 语句,
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
到
if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay())
通过这个小改动,您将看到记录长度大于 10、25、50、100 的分页按钮,而不是仅显示 10 条记录的分页按钮,技术上 10、25 等记录仍然是一页视图。
只需将以下内容添加到您的样式表中:
.dataTables_paginate .paginate_button.disabled {
display: none;
}
你也可以按照这种方式。
"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();
}
}
这对我有用。
我试图在每个条目的数据表中将 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();
}
});
},
$('#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");
}
}
});
这不是直接可能的,因为 DataTables 不支持启用和禁用功能是运行时。 但是,您可以使用 fnDrawCallback() 函数来检查是否只有一页,如果是,则隐藏分页控件。
如果您的数据不是动态的,即,服务器生成 HTML 表,然后通过 DataTables 进行增强,您可以在服务器上呈现分页选项(我正在使用 razor)。
$("#results").dataTable({
paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
// more ...
});
这是我的解决方案,如果您在同一页面上有多个表,它也适用。 例如,它可以防止冲突(表 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();
}
}
这解决了我的问题:
.dataTables_paginate .disabled {
display:none;
}
dataTables_paginate .disabled + span {
display:none;
}
希望对大家有帮助
$("#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();
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.