Datatables 2.0 - 使用默认控件设置具有自定义布局的表格

Question

在 2.0 之前，我可以使用

dom

选项显示三个默认控制器 - 按钮、搜索和页面长度：

$('#data-table').DataTable({
    dom: "<'row'<'col'l><'col' B><'col'f>>t<'row'<'col'i><'col'p>",
        //...
  });

这有效地渲染了这个 dom（或多或少）：

<div class="row">
  <div class="col">{Page length control}</div>
  <div class="col">{Buttons}</div>
  <div class="col">{Search control}</div>
</div>
{ THE TABLE}
<div class="row">
  <div class="col">{Info control}</div>
  <div class="col">{Paging buttons}</div>
</div>

检查https://jsfiddle.net/g2vbru6a/23/

但是，当尝试使用

layout

选项执行类似操作时，我无法在表格的顶部（或底部）设置三个控件。

我已经尝试过：

layout: {topStart: null, topEnd: null, top: ['info', 'buttons', 'search']},

和

layout: {topStart: ['info', 'buttons'], topEnd: 'search'},

还有类似的东西，但它只是将一个叠在另一个之上。如果我可以使用 bootstrap 的

row

和

col

，我会像使用

dom

选项一样显示它们。你能指点我怎么做吗？

Answer 1

DataTables

目前原生不支持两个以上等距元素，另请参阅 DOM 结构。但是，可以通过使用与您类似的

layout

选项来实现这一点，其中所有元素都放入单个数组中，例如到

top

，然后使用

CSS

Flexbox 来定义空间。下面是应用此方法的示例，我们获得三个等宽部分，其中并排包含三个项目。

$(document).ready(function() {
  new $('#data-table').DataTable({
    buttons: ['csv'],
    layout: {
      topStart: null,
      topEnd: null,
      top: ['pageLength', 'buttons', 'search']
    },
  });
});

.col-md {
  display: flex;
}

.col-md>* {
  flex: 1;
  display: flex;
  align-items: center;
}

.dt-info {
  justify-content: flex-start;
}

.dt-buttons.btn-group.flex-wrap {
  justify-content: center;
}

.dt-search {
  justify-content: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/fh-4.0.1/sl-2.0.3/datatables.min.js"></script>
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<table id="data-table" class="table table-striped w-100">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>1111</td>
      <td>1111</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>1111</td>
      <td>1111</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>1111</td>
      <td>1111</td>
    </tr>
  </tbody>
</table>