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

Question

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

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

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

知道如何解决这个问题吗？另一个可接受的解决方案是仅交换显示条目和搜索的位置。如果可以的话，我该怎么做？

关于我的代码，我没有做任何特别的事情，我只是直接从datatables导入库。 API。我所拥有的只是一个用于显示表格的简单 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 选项在数据表初始化时更改此设置。在您的特定情况下，您可以尝试接下来的两种设置，但是，我邀请您尝试一下，以找到另一种更令您信服的设置::

设置 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 选项进行完全显示自定义，我希望本指南对您有所帮助。