javascript - 隐藏数据表导出功能和分页

Question

我使用 jQuery 插件 DataTables 来显示表格。然后我设法通过 Datatables API 添加 CSV 和 PDF 导出功能。然后我有一个由三个选择选项组成的表单。
当用户选择一个项目时，它会显示一个表格。

如果用户选择选择列表的第二项，则会切换到第二个表，并具有与该第二个表关联的导出按钮。这很好，但它仍然是第一个表的导出按钮。如何只显示第一个表的功能并隐藏前一个表的功能？

这是我的代码:

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

        });                               
    }

[...]

非常感谢!

Answer 1

有这样的东西；您需要保留 2 个表格模板。然后销毁该表在您选择期间未使用。

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

      });

    });