如何删除搜索栏和页脚添加的jQuery数据表插件?

我正在使用jQuery的datatable。

我想删除默认情况下添加到表中的搜索栏和页脚(显示有多少行可见)。我只是想用这个插件来排序。这能做到吗?

452419 次浏览
小开

一个快速而肮脏的方法是找出页脚的类，并使用jQuery或CSS隐藏它:

$(".dataTables_info").hide();
小开
最佳答案

对于datatable祝辞= 1.10，使用:

$('table').dataTable({searching: false, paging: false, info: false});

如果你仍然希望能够使用这个插件的.search()函数，你将需要“隐藏”;带有dom设置的搜索栏html:

$('table').dataTable({dom: 'lrt'});

默认值是lfrtip或<"H"lfr>t<"F"ip>(当jQueryUI为true时)，f char表示dom中的过滤(搜索)html， ip表示信息和分页(页脚)。

对于1.10的datatable & lt;，使用:

$('table').dataTable({bFilter: false, bInfo: false});

或者使用纯CSS:

.dataTables_filter, .dataTables_info { display: none; }
小开

你可以通过css隐藏它们:

#example_info, #example_filter{display: none}
小开

如果你正在使用themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }
小开

查看http://www.datatables.net/examples/basic_init/filter_only.html以获得要显示/隐藏的特性列表。

你想要的是将“bFilter”和“bInfo”设置为false;

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

你也可以通过设置sDom: http://datatables.net/usage/options#sDom完全不画页眉或页脚

'sDom': 't'

将只显示表，没有页眉或页脚或任何东西。

这里讨论了一些:http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

小开

我通过为footer分配一个id，然后使用css进行样式化来做到这一点:

    <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
<thead>
<tr>
<th></th>


</tr>
</thead>
<tfoot>
<tr>
<th id="FooterHidden"></th>
</tr>
</tfoot>
<tbody>


<tr>


<td class="copyableField"></td>


</tr>
</tbody>
</table>

然后使用CSS样式:

#FooterHidden{
display: none;
}

如上所述的方法并不适合我。

小开

您可以使用sDom属性。代码看起来像这样。

$(document).ready(function() {
$('#example').dataTable( {
'sDom': '"top"i'
} );
} );

İt隐藏搜索和寻呼机框。

小开

在这里你可以添加sDom元素到你的代码，顶部搜索栏是隐藏的。

$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
} );
} );
小开 
<script>
$(document).ready(function() {
$('#nametable').DataTable({
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});
</script>

在数据表构造函数中

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

小开

正如@Scott Stafford所说，sDOM是显示、隐藏或重新定位组成数据表的元素的最适用的属性。我认为sDOM现在已经过时了，在实际的补丁中这个属性现在是dom。

这个属性还允许为一个元素设置一些类或id，所以你可以更容易地设计风格。

在这里查看官方文档:https://datatables.net/reference/option/dom

这个例子只显示表:

$('#myTable').DataTable({
"dom": 't'
});
小开

如果你正在使用自定义过滤器，你可能想隐藏搜索框，但仍然想启用过滤器功能，所以bFilter: false不是方法。使用dom: 'lrtp'代替，默认为'lfrtip'。文档:https://datatables.net/reference/option/dom

小开

这可以通过简单地改变配置来完成:

$('table').dataTable({
paging: false,
info: false
});

但要隐藏空页脚;这段代码做到了:

 $('table').dataTable({
paging: false,
info: false,


//add these config to remove empty header
"bJQueryUI": true,
"sDom": 'lfrtip'


});
小开

我认为最简单的方法是:

<th data-searchable="false">Column</th>

你可以只编辑你必须修改的表，而不改变常见的CSS或JS。

小开 
var table = $("#datatable").DataTable({
"paging": false,
"ordering": false,
"searching": false
});
小开

只是提醒一下，你不能在同一个__ABC1元素上初始化DataTable两次。

如果你遇到同样的问题，那么你可以在初始化HTML <table>上的数据表时将searching和paging设置为false，就像这样

 $('#tbl').DataTable({
searching: false,
paging: false,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
小开
从DataTables 1.10.5开始，现在可以定义初始化了 使用HTML5 data-*属性的选项

-数据表文档:HTML5数据-*属性-表选项

所以你可以在table上指定data-searching="false" data-paging="false" data-info="false"。例如，该表将不允许搜索、应用分页或显示信息块:

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
<thead>
<tr>
<th>Name</th>
<th data-orderable="false">Avatar</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>

看到https://jsfiddle.net/jhfrench/17v94f2s/上的一个工作示例。

这种方法的优点是，它允许你有一个标准的dataTables调用(即$('table.apply_dataTables').DataTable())，同时能够逐表配置dataTables选项。

小开

如果你只是想隐藏搜索表单，例如，因为你有列输入过滤器，或者可能是因为你已经有一个CMS搜索表单能够从表中返回结果，那么你所要做的就是检查表单并获得它的id -(在编写本文时，它看起来像这样__abc0)。然后简单地执行[tableid]-table_filter.dataTables_filter{display:none;}，保留数据表的所有其他特性。

小开

#table是表的Id

$('#table').dataTable({searching: false, paging: false, info: false});
小开

没有过滤输入控件。(https://datatables.net/reference/option/dom)

    /* Results in:
{length}
{processing}
{table}
{information}
{pagination}
*/
$('#example').dataTable( {
"dom": 'lrtip'
} );
小开

这对我很管用;

您可以使用此属性在表上删除搜索栏:

小开 
$('#my_table').DataTable({
"iDisplayLength": 100,
"searching": false,
"paging": false,
"info": false,
});

提交答案