Is it possible to hide datatable buttons until the user does something? The problem is that at least until now (v. 1.10.18) exports can be very slow with datatables for an unfiltered table (let's say 20000 rows). So i'd like the user to see the export only when the table itself is filtered.
I've tried table.buttons('pdf','excel').disable() to no avail.
This is the code that renders the table. I want it to first hide the buttons and then to show them after the user performs a search.
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();
}
} );
} );