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

      });

    });

隐藏DataTables导出功能和分页

1 个答案: