Отключить датируемые кнопки, пока пользователь не выполнит поиск

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);
    });
}

Третий, 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();
    }
}

Edit:

Кнопки объявлены так:

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