<tr><td>老虎尼克松</td><td>系统架构师</td><td>爱丁堡</td><td>61</td></tr><tr><td>加勒特·温特斯</td><td>会计师</td><td>东京</td><td>63</td></tr><tr><td>阿什顿考克斯</td><td>初级技术作者</td><td>旧金山</td><td>66</td></tr></tbody>最后，如示例所示，要应用自定义设置，只需在插件初始化时在 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({/* 其他初始化选项 */...,dom":domSetup});
注意，您可以对 dom 选项进行完全显示自定义管理，希望本指南对您有所帮助.
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:
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?
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.
解决方案
Since you are using Bootstrap, I will explain how to work with the display of elements related to the datatables plugin. 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
And the default dom configuration for Bootstrap on Datatables are the next ones:
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>>"
Now, 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>
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;
}
The good thing is that you can change this setup on Datatables initialization using the dom option. In your particular case, you can try out the next two setups, however, I invite you to play a little to found another one more convincing to you::
Setup 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>>"
That will be traduced to next 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>
Example in 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>
Setup 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>>"
That will be traduced to next 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>
Example in 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>
Finally, as shown on the examples, and to apply a custom setup, just push a value on the dom option at the plugin 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 initialization options */
...,
"dom": domSetup
});
Note, you can do a fully display customization managing the dom option, I hope this guide helps you.
这篇关于Boostrap 3中Datatables插件的显示格式自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
