如何删除 jQuery DataTables 插件添加的搜索栏和页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1920600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove the search bar and footer added by the jQuery DataTables plugin?
提问by leora
I am using jQuery DataTables.
我正在使用jQuery 数据表。
I want to remove the search bar and footer (showing how many rows there are visible) that is added to the table by default. I just want to use this plugin for sorting, basically. Can this be done?
我想删除默认添加到表格中的搜索栏和页脚（显示有多少行可见）。我只是想使用这个插件进行排序，基本上。这能做到吗？
回答by antpaw
For DataTables >=1.10, use:
对于数据表 >=1.10，使用：
$('table').dataTable({searching: false, paging: false, info: false});
For DataTables <1.10, use:
对于DataTables <1.10，使用：
$('table').dataTable({bFilter: false, bInfo: false});
or using pure CSS:
或使用纯 CSS：
.dataTables_filter, .dataTables_info { display: none; }
回答by Eric
Check out http://www.datatables.net/examples/basic_init/filter_only.htmlfor a list of features to show/hide.
查看http://www.datatables.net/examples/basic_init/filter_only.html以获取要显示/隐藏的功能列表。
What you want is to set "bFilter" and "bInfo" to false;
你想要的是将“bFilter”和“bInfo”设置为false；
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate": false,
"bFilter": false,
"bInfo": false
} );
} );
回答by Scott Stafford
You can also not draw the header or footer at all by setting sDom: http://datatables.net/usage/options#sDom
您也可以通过设置根本不绘制页眉或页脚sDom：http: //datatables.net/usage/options#sDom
'sDom': 't'
will display JUST the table, no headers or footers or anything.
将只显示表格，没有页眉或页脚或任何东西。
It's discussed some here: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1
这里讨论了一些：http: //www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1
回答by sulaiman sudirman
If you are using custom filter, you might want to hide search box but still want to enable the filter function, so bFilter: falseis not the way. Use dom: 'lrtp'instead, default is 'lfrtip'. Documentation: https://datatables.net/reference/option/dom
如果您使用自定义过滤器，您可能想隐藏搜索框但仍想启用过滤器功能，所以bFilter: false不是这样。使用dom: 'lrtp'替代，默认为'lfrtip'。文档：https: //datatables.net/reference/option/dom
回答by Pietro La Grotta
var table = $("#datatable").DataTable({
"paging": false,
"ordering": false,
"searching": false
});
回答by kgiannakakis
A quick and dirty way is to find out the class of the footer and hide it using jQuery or CSS:
一种快速而肮脏的方法是找出页脚的类并使用 jQuery 或 CSS 隐藏它：
$(".dataTables_info").hide();
回答by paja01
if you are using themeroller:
如果您使用的是主题滚轮：
.dataTables_wrapper .fg-toolbar { display: none; }
回答by Gaurav Bhatra
<script>
$(document).ready(function() {
$('#nametable').DataTable({
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});
</script>
in your datatable constructor
在您的数据表构造函数中
https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box
https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box
回答by Grirg
As said by @Scott Stafford sDOMis the most apropiated property to show, hide or relocate the elements that compose the DataTables. I think the sDOMis now outdated, with the actual patch this property is now dom.
正如@Scott Stafford 所说，sDOM是显示、隐藏或重新定位组成数据表的元素的最合适的属性。我认为sDOM现在已经过时了，这个属性现在是实际补丁dom。
This property allows to set some class or id to an element too, so you can stylish easier.
此属性也允许为元素设置一些类或 id，因此您可以更轻松地设计。
Check the oficial documentation here: https://datatables.net/reference/option/dom
在此处查看官方文档：https://datatables.net/reference/option/dom
This example would show only the table:
此示例将仅显示表：
$('#myTable').DataTable({
"dom": 't'
});
回答by Shayan Sulehri
This can be done by simply changing the configuration:
这可以通过简单地更改配置来完成：
$('table').dataTable({
paging: false,
info: false
});
But to hide the empty footer; this piece of code does the trick:
但要隐藏空页脚；这段代码可以解决问题：
$('table').dataTable({
paging: false,
info: false,
//add these config to remove empty header
"bJQueryUI": true,
"sDom": 'lfrtip'
});
