DataTable: 隐藏“显示条目”下拉列表，但保留“搜索”框

是否可以隐藏“显示条目”下拉列表，但将“搜索”框保留在 DataTable 中？我想总是显示10行与分页在底部一起搜索框，但不想显示显示条目下拉列表。

327957 次浏览
小开

SDom: “ Tfrtip”或通过回调:

"fnHeaderCallback": function(){
$('#YOURTABLENAME-table_length').hide();
}
小开
最佳答案

您可以直接在这个链接上找到更多信息: http://datatables.net/examples/basic_init/filter_only.html

$(document).ready(function() {
$('#example').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false });
});

希望能帮上忙！

编辑: 如果你很懒，“ bLengthChange”: 假，就是你需要改变的那个:)

小开

这是 钥匙回答这个帖子 "bLengthChange": false,将隐藏条目下拉

小开

若要禁用「显示项目」标签，请使用「 bInfo 」 ，例如: “ bFilter”是搜索组件，但默认情况下是活动的。

$(document).ready( function () {
$('#example').dataTable( {
"bInfo": false
} );
} );

启用或禁用表信息显示。这将显示有关页上当前可见的数据的信息，包括正在执行筛选的数据的信息(如果正在执行该操作)。

小开

添加以下选项:

"bInfo": false
小开

隐藏“显示条目”，但仍然有分页。我使用了下面的代码，它工作。

"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false
小开

对于 DataTables < = 1.9，@ perpo的答案

$('#example').dataTable({
"bLengthChange": false
});

工作良好，但对于1.10 + 尝试以下方法:

$('#example').dataTable({
"dom": 'ftipr'
});

我们忽略了 l的“长度变化输入控制”

1.9文件

1.10文件

小开

若要禁用“ Show Entry”标签，请添加代码 dom: ‘ Bfrtip’或者可以添加“ bInfo”: false

$('#example').DataTable({
dom: 'Bfrtip'
})
小开

如果使用 Dattable > 1.1.0，那么 lengthChange选项是您所需要的，如下所示:

$('#example').dataTable( {
"lengthChange": false
});
小开 
"searching": false,   // Search Box will Be Disabled


"ordering": false,    // Ordering (Sorting on Each Column)will Be Disabled


"info": true,         // Will show "1 to n of n entries" Text at bottom


"lengthChange": false // Will Disabled Record number per page
小开

你也可以试试这个。

通过使用,

 .dataTables_length {
display: none;
}

两个都会成功的。

小开

我就是这么解决的，用4号引导程序

    $(document).ready(function () {
$('#table').DataTable({
"searching": false,
"paging": false,
"info": false
});
});

Cdn js:

Cdn css:

小开

只要写:

  $(document).ready( function () {
$('#example').dataTable( {
"lengthChange": false
} );
} );
小开

如果你使用角度，你可以使用下面的代码做同样的事情。

在组件中

<table id="" datatable [dtOptions]="dtOptions" class="table dataTable">

还有你的组件

 dtOptions: any = {}




this.dtOptions = {
searching: true,    //enables the search bar
info: false        //disables the entry information
}

有更多的数据表可供选择 如欲了解更多资料，请浏览 给你

小开

对于特定的页面，我建议您使用纯 CSS ——

.dataTables_filter, .dataTables_info, .dataTables_paginate, .dataTables_length
{
display: none;
}

以上代码将隐藏一切。


提交答案