如何让DataTables搭配Bootstrap 4时筛选输入框占满容器宽度？

我现在在用Bootstrap 4搭配DataTables，想让筛选输入框占满页面宽度。目前我是这么做的：

$("#table").dataTable({ "dom": "frtip", ... "paging": false });

#table_filter label { width: 100%; }
#table_filter input { display: block; margin-left: 0; width: 100%; }

但感觉这种方法有点取巧，想问问有没有更优的实现方式？

其实你当前的方法能实现需求，但确实可以更优雅规范一些。结合Bootstrap的栅格系统和DataTables的原生配置，给你几种更合适的方案：

1. 用DataTables的dom配置结合Bootstrap栅格类（最简洁） #

DataTables的dom选项可以自定义布局元素的嵌套结构，我们直接把筛选框放到Bootstrap的全屏栅格容器里，不用额外写CSS就能让输入框占满宽度：

$("#table").DataTable({
  paging: false,
  dom: '<"container-fluid"<"row"<"col-12"f>>>rtip'
});

这里的container-fluid是Bootstrap的全屏容器，row+col-12让筛选框（对应dom里的f）占满整行宽度，DataTables和Bootstrap的样式会自动适配，输入框自然就撑满页面了，还能复用在多个表格上。

2. 自定义筛选框（最灵活） #

如果需要完全控制筛选框的位置和样式，可以隐藏默认的筛选框，自己写一个符合Bootstrap风格的输入框，再绑定DataTables的筛选事件：

<!-- 自定义筛选框，用Bootstrap的form-control类自动占满宽度 -->
<div class="container-fluid my-3">
  <input type="text" id="custom-search" class="form-control" placeholder="输入关键词搜索...">
</div>

// 初始化表格时隐藏默认筛选框
const myTable = $("#table").DataTable({
  paging: false,
  dom: 'rtip' // 去掉默认的筛选框标识"f"
});

// 给自定义输入框绑定筛选事件
$("#custom-search").on("keyup", function() {
  myTable.search(this.value).draw();
});

这种方式完全脱离DataTables的默认布局，你可以把筛选框放在页面任何位置，Bootstrap的form-control类本身就会让输入框占满父容器，适配性拉满。

3. 优化现有CSS，用类选择器替代ID选择器 #

如果还是想保留默认的筛选结构，把你当前的ID选择器改成类选择器，这样能复用在所有DataTables表格上，更符合CSS最佳实践：

.dataTables_filter label {
  width: 100%;
  margin-bottom: 0;
}
.dataTables_filter input {
  display: block;
  margin-left: 0;
  width: 100%;
  /* 可以加上Bootstrap的表单样式，让风格统一 */
  padding: .375rem .75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

这样不管你的表格ID是什么，所有DataTables生成的筛选框都会生效，不用为每个表格单独写样式。

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