如何在DataTables.js中添加输入框并调整顶部组件布局？

Hey there! 我来帮你一步步搞定DataTables的这个布局调整需求，放心，我会把步骤写得很清楚，适合布局经验不多的同学～

核心思路 #

我们要做两件事：

1. 在DataTables的Bfrtip布局区域里，给Excel下载按钮和搜索栏之间插入一个专门放范围输入框的容器
2. 给输入框设置和搜索栏一致的样式，再通过CSS让它们横向排列

步骤1：修改DataTables的dom配置，预留自定义区域 #

DataTables的dom选项用来控制各个组件的位置，默认的Bfrtip是「按钮(B) → 搜索栏(f) → 加载提示(r) → 表格(t) → 信息(i) → 分页(p)」的顺序。我们需要在B和f之间加一个自定义容器，把dom改成这样：

$('#your-table-id').DataTable({
  dom: 'B<"dt-range-container">frtip', // <"dt-range-container">就是我们的自定义容器
  buttons: [
    { extend: 'excel', text: 'Excel下载' } // 你的Excel按钮配置
  ],
  // 其他你的现有配置...
});

这里的dt-range-container是我们给容器起的class名，后面会用来放输入框和设置样式。

步骤2：添加from/to输入框到自定义容器 #

在DataTables的initComplete回调里（表格初始化完成后执行），我们创建两个输入框，添加到刚才的容器里，同时给它们和搜索栏对齐的基础样式：

$('#your-table-id').DataTable({
  // 上面的dom和buttons配置...
  initComplete: function() {
    // 找到我们的自定义容器
    const rangeContainer = $('.dt-range-container');
    
    // 创建from输入框
    const fromInput = $('<input>', {
      type: 'text',
      placeholder: 'From',
      class: 'dt-range-input' // 自定义class，方便统一样式
    });
    
    // 创建to输入框
    const toInput = $('<input>', {
      type: 'text',
      placeholder: 'To',
      class: 'dt-range-input'
    });
    
    // 把输入框和分隔文本添加到容器里
    rangeContainer.append(fromInput).append('<span style="margin: 0 8px;">-</span>').append(toInput);
  }
});

步骤3：设置样式，让输入框和搜索栏一致且横向排列 #

接下来写CSS，让输入框和默认搜索栏样式匹配，同时让容器里的元素横向排列：

/* 让自定义容器横向布局，和按钮、搜索栏对齐 */
.dt-range-container {
  display: inline-block;
  margin: 0 16px; /* 和按钮、搜索栏之间留合适间距 */
}

/* 匹配DataTables默认搜索栏的输入框样式 */
.dt-range-input {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  /* 如果你的项目用了Bootstrap，直接给输入框加form-control class就行，不用上面的样式 */
}

/* 输入框聚焦时的样式，和搜索栏保持一致 */
.dt-range-input:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

额外小提示 #

如果你的项目用了Bootstrap，那操作更简单：

• 给输入框直接加form-control class，不用手写输入框样式
• 给自定义容器加d-inline-block mx-3 class，不用写容器的布局样式

这样调整后，你的from/to输入框就会乖乖待在Excel按钮和搜索栏之间，样式和搜索栏完全一致，而且是横向排列的啦～

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