Bootstrap DataTables：解决LengthMenu与导出按钮布局拥挤问题

我明白你想要的布局效果：让项目搜索、条目选择器、导出按钮分开展示，避免拥挤。下面给你两种可行的方案，不需要直接用<br>或<p>标签就能实现：

方案一：通过DataTables的dom配置调整布局 #

DataTables的dom参数可以自定义控件的位置和容器，我们可以把长度菜单（l）和按钮组（B）放在不同的容器里，让它们自动换行。

修改你的dom配置为：

dom: '<"top"l><"top"B>frtip',

这样会把长度菜单和按钮组分别放在两个带有top类的容器中，默认情况下这两个容器会上下排列，自然分隔开。

如果需要更精细的控制，还可以给容器添加自定义类名，比如：

dom: '<"top length-container"l><"top button-container"B>frtip',

然后配合CSS调整间距：

.length-container {
  margin-bottom: 10px; /* 给长度菜单底部添加间距 */
}
.button-container {
  margin-bottom: 10px;
}

方案二：通过CSS直接调整元素间距 #

如果不想修改dom配置，也可以用CSS给长度菜单或按钮组添加底部/顶部间距，强制它们换行：

/* 给长度菜单添加底部间距，确保独占一行 */
.dataTables_length {
  margin-bottom: 15px;
  display: block;
}

/* 或者给按钮组添加顶部间距 */
.dt-buttons {
  margin-top: 15px;
  display: block;
}

修改后的完整代码示例 #

下面是整合了方案一的完整代码，同时清理了原代码中重复引入的脚本（重复脚本可能导致冲突，建议删除）：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

<style>
div.dt-button-collection { width: 215px; }
.display.dataTable { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 12px; }
.modal { max-width: 1000px; margin: 2rem auto; }
td.none { display: none; }
/* 可选：给长度菜单容器添加底部间距 */
.length-container {
  margin-bottom: 10px;
}
</style>

<table id="example" class="display">
 <thead>
  <tr>
   <th class="all" data-toggle="tooltip" title="The known name of the project.">Project Name</th>
   <th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
   <th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
   <th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>
   <th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Project 1</td>
   <td>P-1</td>
   <td>2018-04-30 00:00:00</td>
   <td>NIH</td>
   <td>
    <div id="ex83" class="modal">
     <p> Abstract 1 <a href="#" rel="modal:close"></a> </div>
     <p><a href="#ex83" rel="modal:open"><button class="button">Open<span></span></button></a></p>
   </td>
  </tr>
  <tr>
   <td>Project 2</td>
   <td>P-2</td>
   <td>2024-03-31 00:00:00</td>
   <td>NIH</td>
   <td>
    <div id="ex103" class="modal">
     <p> Abstract 2 <a href="#" rel="modal:close"></a> </div>
     <p><a href="#ex103" rel="modal:open"><button class="button">Open<span></span></button></a></p>
   </td>
  </tr>
  <tr>
   <td>Project 3</td>
   <td>P-3</td>
   <td>2021-01-31 00:00:00</td>
   <td>NIH</td>
   <td>
    <div id="ex111" class="modal">
     <p> Abstract 3</p>
     <a href="#" rel="modal:close"></a>
    </div>
    <p><a href="#ex111" rel="modal:open"><button class="button">Open<span></span></button></a></p>
   </td>
  </tr>
 </tbody>
</table>

<script>
$(document).ready(function() {
 $('#example').DataTable({
  "lengthMenu": [10, 25, 50, 75, 100],
  dom: '<"top length-container"l><"top"B>frtip', // 修改后的dom配置
  "columnDefs": [{
    "targets": [],
    "visible": false,
    "searchable": false
   }, {
    "targets": [],
    "visible": false
   }
  ],
  buttons: [{
    extend: 'copyHtml5',
    exportOptions: {
     columns: ':visible',
     format: {
      body: function(data, row, column, node) {
       var text = node.textContent;
       return column === 10 ? text.replace(/Open$/, '').trim() : data;
      }
     }
    }
   }, {
    extend: 'excelHtml5',
    exportOptions: {
     columns: ':visible',
     format: {
      body: function(data, row, column, node) {
       var text = node.textContent;
       return column === 10 ? text.replace(/Open$/, '').trim() : data;
      }
     }
    }
   }, {
    extend: 'csvHtml5',
    exportOptions: {
     columns: ':visible',
     format: {
      body: function(data, row, column, node) {
       var text = node.textContent;
       return column === 10 ? text.replace(/Open$/, '').trim() : data;
      }
     }
    }
   }, {
    extend: 'pdfHtml5',
    orientation: 'landscape',
    exportOptions: {
     columns: ':visible',
     format: {
      body: function(data, row, column, node) {
       var text = node.textContent;
       return column === 10 ? text.replace(/Open$/, '').trim() : data;
      }
     }
    }
   }, 'colvis'
  ]
 });
});
</script>

这样修改后，长度菜单和导出按钮就会分开展示，完全符合你预期的布局效果啦！

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