0

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

            }
        } );

    } );

1 Answer 1

3

First, you have to know what classes are generated by datatable plugin.

For this, go to console and write this:

otablePreciosPaquete.buttons();

And here are the classes:

enter image description here

Second, in initComplete use this code:

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

Third, 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();
    }
}

Edit:

Buttons are declared like this:

buttons: {
        buttons: [
            { extend: 'copy', className: 'copyButton' },
            { extend: 'excel', className: 'excelButton' }
        ]
    }
5
  • otablePreciosPaquete.buttons(); ? I'll need to see your code to get where do you get that preciospaquete thing from. I don't have that on my code.
    – ffuentes
    Apr 15, 2019 at 15:09
  • otablePreciosPaquete for you is table
    – Dani
    Apr 15, 2019 at 15:10
  • Ok, but table doesn't get me any buttons and that's why I made the question. All in all, I found them in '.dt-buttons'. I guess that way I could hide them and show them. the function you made makes a lot of sense.
    – ffuentes
    Apr 15, 2019 at 15:13
  • Edited, maybe this can help you :P
    – Dani
    Apr 15, 2019 at 15:26
  • It worked! Declaring the buttons was very important.
    – ffuentes
    Apr 15, 2019 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.