Question

是否可以隐藏数据表按钮，直到用户执行某些操作？问题在于，至少到现在为止（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);
    });
}

第三项controlButtons功能：

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' }
        ]
    }

禁用数据表按钮，直到用户搜索

1 个答案: