在用户搜索之前禁用数据表按钮

Question

在用户做某事之前是否可以隐藏数据表按钮？问题是，至少到现在（v. 1.10.18）对于未过滤表（比如说 20000 行）的数据表，导出可能非常慢。因此，我希望用户仅在过滤表本身时才能看到导出。

我试过 table.buttons('pdf','excel').disable() 无济于事。

这是呈现表格的代码。我希望它先隐藏按钮，然后在用户执行搜索后显示它们。

 var table = $('#BCHtable').DataTable( {
        orderCellsTop: true,
        fixedHeader: false,
        responsive: true,
        oSearch: {"bSmart": false},
        ajax: "{{ route('datatableInvBCH') }}",
        dom: 'Bfrtip',
        buttons: [
        'excel', 'pdf'
        ],
        language: 
                {"url": "{{asset('assets/dt/Spanish.lang')}}"}
        ,
        columns: [
        { data: 'id', name: 'id' },
        { data: 'rotulo', name: 'rotulo'},
        { data: 'serie', name: 'serie'},
        { data: 'tipo', name: 'tipo'},
        { data: 'marca', name: 'marca'},
        { data: 'modelo', name: 'modelo'},
        { data: 'nombre', name: 'nombre'},
        { data: 'rut', name: 'rut'},
        { data: 'region', name: 'region'},
        { data: 'site', name: 'site'}
        ],
        initComplete: function() {
            $('#footer-act').show();

        }
    } );


    $('#BCHtable thead tr').clone(true).appendTo( '#BCHtable thead' );
    $('#BCHtable thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" class="form-control" placeholder="'+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search(this.value) 
                    .draw();

            }
        } );

    } );

Answer 1

首先，你要知道数据表插件生成了哪些类。

为此，请转到控制台并编写以下内容：

otablePreciosPaquete.buttons();

这里是类：

其次，在initComplete 使用这个代码：

"initComplete": function (settings, json) {
    //  First control, on init
    controlButtons(otablePreciosPaquete);

    //  When user write some text in search box, call control function
    otablePreciosPaquete.on('search.dt', function () {
        controlButtons(otablePreciosPaquete);
    });
}

三、controlButtonsfunction：

function controlButtons(myTable) {
    let textSearched = myTable.search();
    let numberOfRows = myTable.rows({ filter: 'applied' }).count();

    //  If text length > 3 or number of rows (with filters) <= 1000, enable buttons
    if (textSearched.length > 3 || numberOfRows <= 1000) {
        myTable.buttons(['.buttons-excel', '.otherClass']).enable();

    //  If text length <= 3 or number of rows (with filters) > 1000, disable buttons
    } else {
        myTable.buttons(['.buttons-excel', '.otherClass']).disable();
    }
}

编辑：

按钮声明如下：

buttons: {
        buttons: [
            { extend: 'copy', className: 'copyButton' },
            { extend: 'excel', className: 'excelButton' }
        ]
    }