如果数据表中没有可用数据，如何删除搜索和导出按钮

Posted 2023-05-07

【中文标题】如果数据表中没有可用数据，如何删除搜索和导出按钮

【英文标题】：How to Remove search and export buttons if no data available in datatable

【发布时间】：2017-06-19 01:42:47

【问题描述】：

我想删除“搜索”和“导出（复制、excel、csv、pdf...等） 按钮”，如果数据表中没有数据。

我可以找出数据表的长度为“0”，但找不到任何解决方案如何删除按钮和搜索控件。

当前数据表显示我需要的“无可用数据”。我可以正确显示数据表。

这是我迄今为止尝试过的。

var table = $('#tblParametersPopUp').dataTable(

    dom: 'Bfrt',
    bPaginate: false,
    oLanguage: 
        sSearch: '<i class="fa fa-search">&nbsp; </i>'
    ,
    buttons: [
                
                    extend: 'copy',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copy'
                ,
                
                    extend: 'excel',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                ,
                
                    extend: 'csv',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                ,
                
                    extend: 'pdf',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                ,
                
                    extend: 'print',
                    text: '<i class="fa fa-print"></i>',
                    titleAttr: 'Print'
                
    ]
    //,
    ////initialization params as usual
    //fnInitComplete: function () 
    //    if ($(this).find('tbody tr').length <= 1) 
    //        $(this).parent().hide();
    //    
    //
);
if(table.fnSettings().aoData.length == "0")

    //alert('no data');
    //I want to remove the default search and export buttons here.

请帮忙！

【问题讨论】：

也许可以试试？ $('i').hide();

【参考方案1】：

您可以检查表是否为空，如果为空，则销毁表并使用搜索禁用初始化数据表

$(document).ready(function() 
 var table =$('#example').DataTable( 
        dom: 'Bfrtip',
        buttons: [
            'copyhtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
     );
if ( ! table.data().count() ) 
    $('#example').dataTable().fnDestroy();
        $('#example').DataTable( 
        searching: false
    )

 );

【讨论】：

您的意思是说销毁表并在没有搜索和按钮的情况下重新创建？还有其他简单的解决方案吗？

只有这样我才用来自 ajax 响应的新数据更新数据表。

投反对票的请添加 cmets 或者更好地添加您的答案，我将删除并支持您的答案。

【参考方案2】：

为此，您可以使用drawCallback

drawCallback: function (settings) 
                $this.datatable.button(0).enable(settings.json.recordsTotal > 0);
                $this.datatable.button(1).enable(settings.json.recordsTotal > 0);
                $this.datatable.button(2).enable(settings.json.recordsTotal > 0);