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 ThivankaW · Accepted Answer · 2018-12-14T21:59:38

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

      });

    });

Hide DataTables export features and pagination

1 Answers