帶有數據表的空行/ 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。