DataTable中CSV与PDF按钮间距设置：spacer无效求助

我的DataTable上CSV和PDF两个按钮间距过近，尝试用DataTables官方的spacer按钮添加间距，但没有效果。

我的按钮配置代码如下：

buttons: [
    {
      extend: 'csv', 
      title: 'Lock Logs for @Model.LockName',
      filename: function () {
        var filename = 'Lock Logs for @Model.LockName ';
        var dt = new Date();
        var currentdatetime = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + '_' + dt.getHours() + '-' + dt.getMinutes() + '-' + dt.getSeconds();

        return filename + currentdatetime;
      }
    },
    {
       extend: 'spacer'
    },
    {
      extend: 'pdf',
      title: 'Lock Logs for @Model.LockName',
      filename: function () {
        var filename = 'Lock Logs for @Model.LockName ';
        var dt = new Date();
        var currentdatetime = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + '_' + dt.getHours() + '-' + dt.getMinutes() + '-' + dt.getSeconds();

        return filename + currentdatetime;
      }
    }
  ]

引入的脚本文件如下：

<link rel="stylesheet" type="text/css" href="~/Scripts/DataTables/media/css/jquery.dataTables.css">
<script type="text/javascript" src="~/Scripts/DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="~/Scripts/DataTables/extensions/Responsive/css/responsive.dataTables.css">
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Responsive/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="~/Scripts/pdfmake.min.js"></script>
<script type="text/javascript" src="~/Scripts/vfs_fonts.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Buttons/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Buttons/js/buttons.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Buttons/js/buttons.html5.js"></script>

解决办法 #

方法1：补全Buttons扩展样式并优化spacer配置 #

spacer按钮需要Buttons扩展的样式支持，你当前缺少对应的Buttons CSS文件，先添加：

<link rel="stylesheet" type="text/css" href="~/Scripts/DataTables/extensions/Buttons/css/buttons.bootstrap.css">

同时可以给spacer自定义间距，确保生效：

{
  extend: 'spacer',
  style: 'margin-left: 15px' // 按需调整间距大小
}

方法2：直接用CSS强制添加间距 #

如果spacer还是不生效，直接用CSS控制更稳妥，添加以下样式到页面：

/* 给所有DataTables按钮（除第一个）加左边距 */
.dt-buttons .btn:not(:first-child) {
  margin-left: 10px;
}

/* 或者只针对CSV和PDF按钮精准控制 */
.dt-buttons .buttons-csv + .buttons-pdf {
  margin-left: 15px;
}

方法3：检查版本兼容性 #

确保DataTables核心库和Buttons扩展的版本一致，版本不匹配可能导致spacer功能失效，尽量使用同一版本的相关文件。

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