如何在DataTables 2.0中修改自定义布局HTML父属性？

Question

我正在尝试将一些自定义 HTML 添加到 DataTable 的顶部，但我注意到 DataTables 自动为本机字段和自定义字段创建的列不具有相同的属性（本机：

col-md-auto

，自定义：

col-md

).

如何修改DataTables 2.0中自定义布局的父类？如果可能的话，我试图避免使用链接 CSS 选择器的黑客解决方法。

在这里我们可以看到结果是添加了我的自定义 HTML 部分，但它们设置为

col-md

而不是

col-md-auto

导致文本在某些屏幕尺寸下堆叠

我还想知道如何修改容器的类，以便我可以在列上设置自定义 Flex 属性并使我的自定义 HTML 正确垂直对齐。例如，如果我们检查元素并将

<div class="col-md">

设置为

<div class="col-md-auto d-flex align-items-center">

，那么我可以为链接部分获得正确的文本对齐方式。否则它们不会垂直对齐

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap5.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.min.js"></script>


<table id="myDataTable" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>


<section id="links" class="" aria-label="Links">
  <a href="#">Home</a>
  <a href="#">Test</a>
  <a href="#">Dashboard</a>
</section>

<div id="archived_checkbox_container" class="filter-option d-flex align-items-end">
  <div class="ms-auto form-switch d-flex">
    <input id="show-archived" name="show-archived" type="checkbox" class="form-check-input me-2">
    <label for="show-archived">Archived</label>
  </div>
</div>

$(document).ready(function() {

  let html_links = $("#links");
  let html_archived_check = $("#archived_checkbox_container");

  $('#myDataTable').DataTable({
    searching: true,
    searchDelay: 500, //(ms) avoid searching on every keystroke

    layout: {
      //random note: for custom layout keys, must start with 'top' or 'bottom'. Probably
      //datatables is parsing for that internally and silently discarding otherwise?
      topStart: "pageLength",
      topMiddleCustom: [html_links],
      topMiddle2Custom: [html_archived_check],
      topEndCustom: "search", //add default search bar *manually* to fix positioning
      topEnd: null //remove the default search bar because it gets positioned wrong
    },
  });
});

通过检查 JSFiddle 并检查结果输出上的元素更容易理解我的问题

https://jsfiddle.net/kq4ws817/2/

Answer 1

您可以在

initComplete

回调中替换 CSS 类吗？

initComplete: function() {
  html_links.parent().addClass('col-md-auto').removeClass('col-md')
  html_archived_check.parent().addClass('col-md-auto').removeClass('col-md')
}

我知道这是一个可怕的丑陋的黑客:( forked/saved jsfiddle -> https://jsfiddle.net/z8q7yp4e/