當數據表為空時，我們如何禁用數據表導出按鈕（或防止點擊事件）？

Question

我正在使用datatable ，當網格有空行時，我需要禁用導出按鈕（Excel、PDF）。 我們如何處理數據表導出按鈕的點擊動作？

我已經完成了網格初始化，如下所示。 我不知道如何處理數據表導出按鈕（PDF、Excel）。 你能幫我解決這個問題嗎？

更新：

1. 我還有一個問題，當用戶單擊 Excel 或 PDF 按鈕時，網格列的寬度正在折疊。

我什至需要用戶單擊 Excel 或 PDF 按鈕，網格列寬不應該改變。 我們怎樣才能做到這一點？

2. 將數據導出到 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);

Answer 1

我不知道接下來的解決方案有意義嗎，但是它解決了我的問題。

當網格具有空行時，我需要禁用導出按鈕（Excel，PDF）。 我們如何處理數據表導出按鈕的單擊動作？

在這里，我已經完成了datatables action屬性。

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

  ]

Answer 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();


            } 
});

Answer 3

處理數據表導出按鈕單擊操作的最簡單方法是創建自己的按鈕並在單擊按鈕時觸發數據表導出按鈕。 這樣您將處理您創建的按鈕的點擊操作：

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

您可以刪除dom: 'lBfrtip'以隱藏原始數據表按鈕。