javascript - Bootstrap 3 Datatables插件自定义显示格式

Question

我想将我的搜索栏移动到 Show entries 位置的旁边，即左侧位置。我将此 CSS 样式代码应用于过滤器输入:

.dataTables_filter {
    width: 50%;
    float: left;
    text-align: left;
}

它确实向左移动了，但没有像预期的那样，它只是向左移动了一点，在中间。如下图所示:

知道如何解决这个问题吗？另一个可接受的解决方案是仅交换 Show entries 和 Search 的位置。如果可能的话，我该怎么做？

关于我的代码，我没有做任何特别的事情，我只是直接从 datatables 导入库应用程序接口(interface)。我所拥有的只是一个用于显示表格的简单 HTML 代码。

Answer 1

由于您使用的是 Bootstrap ，我将解释如何使用与 datatables 相关的元素的显示。插入。 Datatables 提供了一种配置 dom 的方法，换句话说，它让您配置如何显示构成表格一部分的不同元素。这些标识如下:

The built-in table control elements in DataTables are:

l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element

接下来是 Datatables 上 Bootstrap 的默认 dom 配置:

Bootstrap 3:

"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

Bootstrap 4:

"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"

现在，Bootstrap 3 的 dom 设置被转换为以下 html 标记:

<div class="row">
  <div class="col-sm-6">l</div>
  <div class="col-sm-6">f</div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

这就是为什么当您在过滤控件 上使用以下 CSS 样式时，它只是转到页面中间(注意过滤控件 f 包裹在 col-sm-6 元素内):

.dataTables_filter {
  width: 50%;
  float: left;
  text-align: left;
}

好处是您可以使用 dom 选项在 Datatables 初始化时更改此设置。在您的特定情况下，您可以尝试接下来的两个设置，但是，我邀请您尝试一下以找到另一个对您更有说服力的设置::

设置 1:

"<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

下一个 html 将被翻译成:

<div class="row">
  <div class="col-sm-3">l</div>
  <div class="col-sm-3">f</div>
  <div class="col-sm-6"></div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

Bootstrap 3 中的示例:

$(document).ready(function()
{
    var domCfg = "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-5'i><'col-sm-7'p>>";

    $('#example').DataTable({
        dom: domCfg
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

<div class="container-fluid">
<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
    </tr>
  </tbody>
</table>
</div>

设置 2:

"<'row'<'col-sm-6'<'pull-left'l><'pull-left'f>><'col-sm-6'>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

下一个 html 将被翻译成:

<div class="row">
  <div class="col-sm-6">
    <div class="pull-left">l</div>
    <div class="pull-left">f</div>
  </div>
  <div class="col-sm-6"></div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

Bootstrap 3 中的示例:

$(document).ready(function()
{
    var domCfg = "<'row'<'col-sm-6'<'pull-left'l><'pull-left'f>><'col-sm-6'>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-5'i><'col-sm-7'p>>";

    $('#example').DataTable({
        dom: domCfg
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

<div class="container-fluid">
<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
    </tr>
  </tbody>
</table>
</div>

最后，如示例所示，要应用自定义设置，只需在插件初始化时向 dom 选项推送一个值，如下所示:

var domSetup = "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row'<'col-sm-5'i><'col-sm-7'p>>";

$('#myTable').dataTable({
    /* Other initialization options */
    ...,
    "dom": domSetup
});

请注意，您可以通过管理 dom 选项进行完全显示自定义，希望本指南对您有所帮助。