【问题标题】:Hide DataTables export features and pagination隐藏 DataTables 导出功能和分页
【发布时间】:2018-12-14 21:20:59
【问题描述】:

我使用 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'
                ]
            });

        });                               
    }

[.....]

非常感谢!

【问题讨论】:

    标签: javascript jquery datatables


    【解决方案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');
               }
    
          });
    
        });
    

    【讨论】:

    • 非常感谢您的帮助。我试过了,效果很好:) 只剩下一个问题:当我从一个表切换到另一个表时,有一个 javascript 警报显示 DataTables 警告:表 id=table2 - 无法重新初始化 DataTable。有关此错误的更多信息,请参阅datatables.net/tn/3。你知道怎么改吗?
    • @Julien 我已经命名了一些变量并在 onchange 事件之外预初始化了表......
    • @ThivankaW 和其他人 - 非常感谢您的帮助,现在它运行良好,我可以从一个选项卡切换到另一个选项卡。再次感谢!!
    猜你喜欢
    • 2015-02-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多