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

Question

我正在使用 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);

score 2 · Accepted Answer

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

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

在这里，我已经完成了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();
        }
      }
    },

  ]

score 0 · Accepted Answer

这个解决方案对我有用，把它放在 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();


            } 
});

score 0 · Accepted Answer

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

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

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

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

3 回答 3

Related

Reference