Hide DataTables export features and pagination

Question

I use the jQuery plugin DataTables to display tables. Then I managed to add the CSV and PDF export features by the Datatables API. Then I have a form composed of three select options.
When a user selects an item, it shows a table.

If the user selects the second item of the select list, it switches to the second table with the export buttons associated to that second table. That is fine but it remains the export buttons of the first table. How can I do to show the features of the first table only and hide features of the previous table ?

Here is my code :

  $('select[name=tab]').change(function () {
    if ($(this).val() == 'tab1') {
        $('#table1').show();  
        $('#table2').hide();                                                                                
        $('#table1').DataTable({
                dom: 'Bfrtip',
                info : false,
                buttons: [
                    'csv', 'excel', 'pdf'
                ]
            });
    }
    else if ($(this).val() == 'tab2') {
        $('#table1').hide();  
        $('#table2').show();                                                                                                               
        $(document).ready(function () {
            $('#list-saint-iv').DataTable({
                dom: 'Bfrtip',
                info : false,
                buttons: [
                    'csv', 'excel', 'pdf'
                ]
            });

        });                               
    }

[.....]

Thank you very much !

ThivankaW · Accepted Answer · 2018-12-15T05:29:14.780

Have something like this; you'll need to keep 2 table templates. and then destroy the table not in use during your selection.

    $( document ).ready(function() {

     var tblTemplateWithoutExport = {

            "paging" : false,
            "info" : false,

       };

       var tblTemplateWithExport = {

            "paging" : false,
             dom: 'Bfrtip',
            "info" : false,
            buttons: [
                'csv', 'excel', 'pdf'
            ]

      };

      var tbl1,tbl2;

      tbl1 = $('#table1').DataTable(tblTemplateWithoutExport);
      tbl2 = $('#table2').DataTable(tblTemplateWithExport); 

      $( 'select[name=tab]' ).change(function() {

          if ($(this).val() == 'tab1') {

             tbl2.destroy();
             tbl1.destroy();  
             tbl1 = $('#table1').DataTable(tblTemplateWithoutExport);


          }

          else if($(this).val() == 'tab2'){

              tbl1.destroy();
              tbl2.destroy();
              tbl2 = $('#table2').DataTable(tblTemplateWithExport); 


          }

          else{
               console.log('something other selection');
           }

      });

    });

Thank you very much for your help. I tried it and that works pretty well :) Just one probleme remaining : when I switch from one table to another, there's a javascript alert which says _DataTables warning: table id=table2 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3_. Do you know how to correct it ? — Julien, Dec 14 '18 at 22:52
@Julien i have named some variables and preinitialized the tables outside of the onchange event.... — ThivankaW, Dec 15 '18 at 05:30
@ThivankaW and others - great thank you very much for your help, now it works well and I can switch from one tab to another. Thanks again !! — Julien, Dec 15 '18 at 22:47

Hide DataTables export features and pagination

1 Answers1