时间戳

首页 > 解决方案 > Boostrap 3 中 Datatables 插件的显示格式自定义

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

问题描述

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

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

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

在此处输入图像描述

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

关于我的代码，我没有做任何特别的事情，我只是直接从数据表 API 导入库。我所拥有的只是一个用于显示表格的简单 HTML 代码。

标签： javascriptjquerytwitter-bootstrap-3datatables

解决方案

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

DataTables中内置的表格控制元素有：

l - 长度变化输入控制
f - 过滤输入
t - 表格！
i - 表格信息摘要
p - 分页控制
r - 处理显示元素

数据表上Bootstrap的默认dom配置如下：

引导程序 3：

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

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

推荐阅读