如何避免为DataTables中的每个按钮编写自定义脚本？

嘿，我完全懂你现在的困扰——给每个按钮重复写相同的自定义逻辑不仅麻烦，后期维护也容易出错。这里有几个实用的方案帮你统一管理这些重复代码：

1. 提取通用自定义函数 #

最直接的方式就是把重复的自定义逻辑抽成一个独立函数，然后在需要的按钮配置里直接引用它：

// 先定义通用的自定义处理函数
const commonButtonCustomize = function(win) {
  $(win.document.body).addClass('white-bg');
  $(win.document.body).css('font-size', '10px');
  $(win.document.body).find('table').css('font-size', 'inherit');
  // 在这里补充你没写完的其他通用样式逻辑
};

// 按钮配置里直接复用这个函数
buttons : [
    { extend : 'copyHtml5'},
    { extend : 'excel', title : "report" },
    { extend : 'pdf', title : "report"},
    { 
      extend : 'print', 
      text : 'Print Selected', 
      orientation : 'landscape', 
      title : '', 
      autoPrint : false, 
      customize : commonButtonCustomize // 直接引用通用函数
    }
    // 其他需要相同自定义逻辑的按钮，同样添加customize: commonButtonCustomize即可
]

2. 扩展DataTables默认按钮类型 #

如果某个按钮类型（比如你这里的print）每次使用都需要相同的配置，你可以直接扩展DataTables的默认按钮定义，这样后续使用该按钮时就不用重复写参数了：

// 扩展默认的print按钮配置，把通用逻辑整合进去
$.fn.dataTable.ext.buttons.print = $.extend(true, {}, $.fn.dataTable.ext.buttons.print, {
  text: 'Print Selected',
  orientation: 'landscape',
  title: '',
  autoPrint: false,
  customize: function(win) {
    $(win.document.body).addClass('white-bg');
    $(win.document.body).css('font-size', '10px');
    $(win.document.body).find('table').css('font-size', 'inherit');
    // 通用样式逻辑
  }
});

// 之后按钮配置就能大幅简化
buttons : [
    { extend : 'copyHtml5'},
    { extend : 'excel', title : "report" },
    { extend : 'pdf', title : "report"},
    { extend : 'print' } // 直接使用扩展后的默认配置，无需重复写参数
]

3. 设置全局按钮默认配置 #

如果大部分按钮都需要通用的自定义逻辑，可以通过全局默认配置来统一设置，只在个别按钮里覆盖差异项：

// 全局设置所有按钮的通用默认配置
$.fn.dataTable.Buttons.defaults = {
  customize: function(win) {
    // 注意：有些按钮（比如copyHtml5）可能没有win参数，需要加判断
    if (win) {
      $(win.document.body).addClass('white-bg');
      $(win.document.body).css('font-size', '10px');
      $(win.document.body).find('table').css('font-size', 'inherit');
    }
  }
};

// 按钮配置只需写每个按钮的差异化内容
buttons : [
    { extend : 'copyHtml5', customize: null }, // 如果这个按钮不需要通用自定义，直接覆盖为null
    { extend : 'excel', title : "report" },
    { extend : 'pdf', title : "report"},
    { 
      extend : 'print', 
      text : 'Print Selected', 
      orientation : 'landscape', 
      title : '', 
      autoPrint : false 
    }
]

选择建议 #

• 只有少数按钮需要相同逻辑？选提取通用函数最灵活。
• 某个按钮类型每次都用固定配置？选扩展默认按钮类型最省心。
• 大部分按钮都需要通用配置？选全局默认设置最高效。

内容的提问来源于stack exchange，提问作者Kiss Me