Leere Zeilen mit Datatabellen/Bootstrap-Tabelle

Question

Ich verstehe nicht das Verhalten meiner Bootstrap 3.3.7 + Datatables 1.10.15 Tabelle.

Hier ist meine erste HTML-Tabelle:

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

Ich verwende dieses Skript, um Paginierung und die Suche zu verstecken, von colomn 1 Abs Wert zu bestellen, und als Reaktion auf und die direkt alle anzuzeigen Reihen.

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

Was kann ich nicht verstehen, warum ist das Skript ist das Hinzufügen von zwei leere div class Zeilen am Anfang und am Ende der Tabelle:

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

Die vollständige machen wird:

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

Ich kann nicht herausfinden, woher diese zusätzlichen 2 Div-Klassen stammen. Haben Sie eine Ahnung und wie kann ich verhindern, dass sie erscheinen (außer Display: keine davon)

Vielen Dank.

Answer 1

Es wird standardmäßig für die Option dom hinzugefügt, wenn das Bootstrap-Styling verwendet wird.

Wenn Sie keine Such-, Seitenumbruch- und Info-Steuerelemente verwenden, können Sie das Standardlayout mit der folgenden Option überschreiben.

dom: 'rt' 

Siehe official documentation für weitere Informationen.