当数据表为空时，我们如何禁用数据表导出按钮（或防止点击事件）？

Posted 2023-05-07

【中文标题】当数据表为空时，我们如何禁用数据表导出按钮（或防止点击事件）？

【英文标题】：How can we disable the datatable export buttons(Or prevent click event) when datatable is empty?

【发布时间】：2017-02-13 11:20:28

【问题描述】：

我正在使用 datatable ，当网格有空行时，我需要禁用导出按钮（Excel、PDF）。 我们如何处理数据表导出按钮的点击动作？

我已经完成了网格初始化，如下所示。 我不知道如何处理数据表导出按钮（PDF、Excel）。 你能帮我解决这个问题吗？

更新：

我还有一个问题，当用户单击 Excel 或 PDF 按钮时，网格列的宽度正在折叠。

我什至需要用户单击 Excel 或 PDF 按钮，网格列宽不应该改变。我们如何才能做到这一点？

将数据导出到excel后，excel中的列不会自动调整。

如何使列（导出数据表数据到excel后）自动调整？

 var buttonCommon = 
    exportOptions: 
      format: 
        body: function(data, column, row, node) 
          return data;
        
      
    
  ;

     var dataTableObj = 
      "processing": true,
      "destroy": true,
      "scrollX": true,
      "columns": [
        "data": "CollegeName",
        "width":"30%"

      , 
        "data": "AffiliatedTo",
         "width":"15%"

      , 
        "data": "TPOName",
        "width":"20%"

      , 
        "data": "Phone",

      , 
        "data": "Website",

        "bSortable": false
      ],
      dom: 'lBfrtip',
      buttons: [
      $.extend( true, , buttonCommon, 
                extend: 'excelhtml5',
                  title: 'Colleges',

             ),


        
          extend: 'pdf',
          title: 'Colleges'
        

      ],

      fnRowCallback: function(nRow, aData, iDisplayIndex) 
         //Some code
        return nRow;
      


    ;


      var dataTbl = $('#tblColleges').DataTable(dataTableObj);

【参考方案1】：

我不知道以下解决方案在多大程度上有意义，但它解决了我的问题。

当网格有 空行。我们如何处理数据表导出按钮点击 行动？

这里我已经完成了datatables 动作属性。

       buttons: [
      extend: 'excelHtml5',
      title: 'Colleges',
      action: function(e, dt, button, config) 
        if (this.data().length > 0) 

          $.fn.dataTable.ext.buttons.excelHtml5.action(e, dt, button, config);
          $scope.hasAlert = 0;
          $scope.$apply();
         else 
          $scope.hasAlert = 2;
          $scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
          $scope.$apply();
        
      

    , 
      extend: 'pdf',
      title: 'Colleges',
      action: function(e, dt, button, config) 
        if (this.data().length > 0) 

          $.fn.dataTable.ext.buttons.pdfHtml5.action(e, dt, button, config);
          $scope.hasAlert = 0;
          $scope.$apply();
         else 
          $scope.hasAlert = 2;
          $scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
          $scope.$apply();
        
      
    ,

  ]

【参考方案2】：

这个解决方案对我有用，把它放在 fnDrawCallback 函数中

$(tableName).dataTable(

 "fnDrawCallback":function () 
                   var table = $(tableName).DataTable();
                    if (table.data().length === 0)
            table.buttons('.buttons-html5').disable();
                 else
            table.buttons('.buttons-html5').enable();


             
);

【参考方案3】：

处理数据表导出按钮单击操作的最简单方法是创建您自己的按钮并在单击按钮时触发数据表导出按钮。 这样您将处理您创建的按钮的点击操作：

$('#exportBtn').on('click', function () 
  dataTbl.button(0).trigger();
);

您可以删除dom: 'lBfrtip'以隐藏原始数据表按钮。