带有数据表的空行/ Bootstrap表

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> 

为了隐藏分页和搜索，通过colomn 1递减的价值秩序，响应并直接全部显示我使用这个脚本行。

<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类的行来自哪里。你有什么线索，我怎么能阻止他们出现（除了显示：没有他们）

谢谢。

Answer 1

当使用Bootstrap样式时，它被添加为默认值dom选项。

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

dom: 'rt' 

有关更多信息，请参见official documentation。