如何删除由jQuery DataTables插件添加的搜索栏和页脚?

2020/11/05 13:12 · jquery ·  · 0评论

我正在使用jQuery DataTables

我想删除默认情况下添加到表中的搜索栏和页脚(显示可见的行数)。基本上,我只想使用此插件进行排序。能做到吗?

对于> = 1.10的数据表,请使用:

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

对于<1.10的数据表,请使用:

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

或使用纯CSS:

.dataTables_filter, .dataTables_info { 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
                 } );
} );

您也无法通过以下设置来绘制页眉或页脚sDomhttp : //datatables.net/usage/options#sDom

'sDom': 't' 

将仅显示表格,不显示页眉,页脚或其他任何内容。

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

如果使用的是自定义过滤器,则可能要隐藏搜索框,但仍要启用过滤器功能,所以bFilter: false不是这样。dom: 'lrtp'改为使用,默认为'lfrtip'文档:https : //datatables.net/reference/option/dom

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

一种快速而肮脏的方法是找出页脚的类,并使用jQuery或CSS将其隐藏:

$(".dataTables_info").hide();

如果您正在使用themeroller:

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

就像@Scott Stafford所说的那样,它sDOM是显示,隐藏或重新定位组成DataTables的元素的最恰当的属性。我认为sDOM现在已经过时了,此属性的实际补丁为now dom

此属性还允许将某些类或id设置为元素,因此您可以更轻松地进行时尚设计。

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

此示例仅显示表格:

$('#myTable').DataTable({
    "dom": 't'
});
<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

您可以在此处sDom向代码中添加元素,顶部搜索栏被隐藏。

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

只需更改配置即可完成此操作:

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

但是要隐藏空白页脚;这段代码可以达到目的:

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

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

});

提醒一下,您不能DataTable在同一<table>元素初始化两次。

如果遇到同样的问题,那么你可以设置searchingpaging假,而在你的HTML初始化的DataTable<table>这样

 $('#tbl').DataTable({
    searching: false, 
    paging: false,
    dom: 'Bfrtip',
    buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
    ]
 });

您可以通过CSS隐藏它们:

#example_info, #example_filter{display: none}

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

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

隐藏搜索和寻呼机框。

从DataTables 1.10.5开始,现在可以使用HTML5 data- *属性定义初始化选项。

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

因此您可以data-searching="false" data-paging="false" data-info="false"在上指定table例如,此表将不允许搜索,应用分页或显示信息块:

<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选项。

我通过为页脚分配一个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;
}

如上所述,方法对我不起作用。

我认为最简单的方法是:

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

您只能编辑必须修改的表,而无需更改通用CSS或JS。

例如,如果您只想隐藏搜索表单,因为您有列输入过滤器,或者可能是因为已经有CMS搜索表单能够从表中返回结果,那么您要做的就是检查表单并获取其ID- (在撰写本文时,它看起来像[tableid]-table_filter.dataTables_filter)。然后只需[tableid]-table_filter.dataTables_filter{display:none;}保留数据表的所有其他功能。

本文地址:http://jquery.askforanswer.com/ruheshanchuyoujquery-datatableschajiantianjiadesousuolanheyejiao.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!