带有数据表/引导表的空行

Question

我不明白我的 bootstrap 3.3.7 + datatables 1.10.15 表的行为。

这是我最初的 HTML 表格：

<table id="types-2" class="table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="both" data-field="Type" data-sortable="true">Type</th>
<th class="both" data-field="Name" data-sortable="true">City</th>
<th class="both" data-field="City" data-sortable="true">‰ city</th>
<th class="both" data-field="Department" data-sortable="true">‰ department </th>
<th class="both" data-field="Region" data-sortable="true">‰ region</th>
</tr>
</thead>
<tbody>
<tr>
<td>Case 1</td>
<td>782 </td>
<td>13.84‰ </td>
<td>18.38‰ </td>
<td>24.25‰ </td>
</tr>
<tr>
<td>Case 2</td>
<td>267 </td>
<td>4.73‰ </td>
<td>5.37‰ </td>
<td>7.87‰ </td>
</tr>
<tr>
<td>Case 3 </td>
<td>191 </td>
<td>3.38‰ </td>
<td>4.27‰ </td>
<td>4.02‰ </td>
</tr>
<tr>
<td>Case 4</td>
<td>144 </td>
<td>0.04‰ </td>
<td>0.29‰ </td>
<td>0.24‰ </td>
</tr>       
</tbody>
</table>

我使用此脚本是为了隐藏分页和搜索，按列 1 desc 值排序，以及响应并直接显示所有行。

<script>
jQuery(document).ready(function() {
jQuery('#types-2').DataTable( {
"bPaginate": false,
"bInfo" : false,
"responsive": true,
"searching": false,
"aaSorting": [[1,'desc']],
responsive: {
details: {
display: jQuery.fn.dataTable.Responsive.display.childRowImmediate,
type: ''
}
}
} );
} );
</script>     

我想不通的是为什么脚本会在表格的开头和结尾添加两个空的 div 类行：

<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
[...]
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7"></div>
</div>

完整的渲染是：

<div id="types-2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="types-2" class="table-bordered table-striped table-condensed dataTable no-footer dtr-" role="grid" style="width: 605px;">
<thead>
<tr role="row">
<th class="both sorting" data-sortable="true" data-field="Type" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 114px;" aria-label="Délit: activate to sort column ascending">Délit</th>
 <th class="both sorting_desc" data-sortable="true" data-field="Name" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 127px;" aria-sort="descending" aria-label="Abrets en Dauphiné : activate to sort column ascending">Abrets en Dauphiné
 </th>
 <th class="both sorting" data-sortable="true" data-field="City" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 140px;" aria-label="‰ Abrets en Dauphiné: activate to sort column ascending">‰ Abrets en Dauphiné
 </th>
 <th class="both sorting" data-sortable="true" data-field="Department" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 48px;" aria-label="‰ Isère : activate to sort column ascending">‰ Isère
 </th>
 <th class="both sorting" data-sortable="true" data-field="Region" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 101px;" aria-label="‰ Rhône-Alpes: activate to sort column ascending">‰ Rhône-Alpes
 </th>
 </tr>
 </thead>
 <tbody>
 <tr class="odd" role="row">
 <td tabindex="0">Case 1</td>
 <td class="sorting_1">782 </td>
 <td>13.84‰ </td>
 <td>18.38‰ </td>
 <td>24.25‰ </td>
 </tr>
 <tr class="even" role="row">
 <td tabindex="0">Case 2</td>
 <td class="sorting_1">267 </td>
 <td>4.73‰ </td>
 <td>5.37‰ </td>
 <td>7.87‰ </td>
 </tr>
 <tr class="odd" role="row">
 <td tabindex="0">Case 3</td>
 <td class="sorting_1">191 </td>
 <td>3.38‰ </td>
 <td>4.27‰ </td>
 <td>4.02‰ </td>
 </tr>
 <tr class="even" role="row">
 <td tabindex="0">Case 4 </td>
 <td class="sorting_1">144 </td>
 <td>0.04‰ </td>
 <td>0.29‰ </td>
 <td>0.24‰ </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <div class="row">
 <div class="col-sm-5"></div>
 <div class="col-sm-7"></div>
 </div>
 </div>

我不知道这些额外的 2 个 div 类行是从哪里来的。你有什么线索吗，我怎样才能防止它们出现（除了 display:none 它们）

谢谢。

Answer 1

在使用 Bootstrap 样式时默认为 dom 选项添加值。

如果您不使用搜索、分页和信息控件，您可以使用以下选项覆盖默认布局。

dom: 'rt'

更多信息请参见official documentation。