在Boostrap 3中自定义数据表插件的显示格式 [英] Customization of Display Format for Datatables Plugin in Boostrap 3

问题描述

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

I want to move my search bar just next to the position of Show entries, that is, to the left position. I have this CSS style code applied to the filter input:

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

它确实向左移动但未按预期移动，它只是移动了一点左边，在中间。如下图所示：

It did move to left but not as expected, it just moved a bit to the left, in the center. Like in the next image:

< img src =https://i.stack.imgur.com/XOWM5.pngalt =在此输入图像说明>

任何想法怎么解决这个问题？另一个可接受的解决方案是只交换显示条目和搜索的位置。如果可能，我该怎么做？

Any idea how to fix this? Another acceptable solution is to just exchange the position of Show entries and Search. If that is possible, how can I do that?

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

Regarding my code, I have done nothing special and I only imported the library directly from the datatables API. All I have is just a simple HTML code for displaying a table.

推荐答案

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

Since you are using Bootstrap, I will explain how to work with the display of elements the datatables plugin provides. Datatables provides a way to configuring the dom, in other words, it let you configure how to display the different elements that form part of the table. These are identified like this:

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

数据表上 Bootstrap 的默认 dom 配置是下一个：

And the default dom configuration for Bootstrap on Datatables are the next ones:

Bootstrap 3 dom：

"<'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 dom：

"<'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标记：

The setup of the dom for Bootstrap 3 is then traduced to the following html markup:

<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元素中）：

That is why when you used the following CSS style on the filtering control it just goes to the middle of the page (note the filtering control f is wrapped inside a col-sm-6 element):

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

好的是你可以在 Datatables <上更改此设置/ strong>使用 dom 选项进行初始化。在你的情况下，你可以尝试接下来的两个设置，但是你可以玩一点来找到一个让你信服的人：

The good thing is that you can change this setup on Datatables initialization using the dom option. In your case, you can try the next two setups, but you can play a little to found one convincing to you:

设置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>

设置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>

要应用自定义设置，只需按 dom 选项上的值在初始化时，如下所示：

To apply a custom setup, just push a value on the dom option at initialization, like this:

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 options initializarion */
    ...,
    "dom": domSetup
});

注意，您可以完全显示管理 dom 选项的自定义，I希望本指南能为您提供帮助。

Note, you can do fully display customization managing the dom option, I hope this guide helps you.

这篇关于在Boostrap 3中自定义数据表插件的显示格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！