Twitter bootstrap 3 带有数据表/引导表的空行

Twitter bootstrap 3 带有数据表/引导表的空行,twitter-bootstrap-3,datatables,Twitter Bootstrap 3,Datatables,我不理解我的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 cl

我不理解我的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
782
13.84‰ 
18.38‰ 
24.25‰ 
案例2
267
4.73‰ 
5.37‰ 
7.87‰ 
案例3
191
3.38‰ 
4.27‰ 
4.02‰ 
案例4
144
0.04‰ 
0.29‰ 
0.24‰ 
我使用这个脚本是为了隐藏分页和搜索、按Column 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>     

jQuery(文档).ready(函数(){
jQuery(“#types-2”)。数据表({
“bPaginate”:错误,
“bInfo”:假,
“响应”:正确,
“搜索”:错误,
“aaSorting”:[[1,'desc']],
响应:{
详情:{
显示:jQuery.fn.dataTable.Responsive.display.childRowImmediate,
类型:“”
}
}
} );
} );
我无法理解的是,脚本为什么要在表的开头和结尾添加两个空的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>

迪利特
短裙
‰短裙
‰Isère
‰罗讷阿尔卑斯山
案例1
782
13.84‰ 
18.38‰ 
24.25‰ 
案例2
267
4.73‰ 
5.37‰ 
7.87‰ 
案例3
191
3.38‰ 
4.27‰ 
4.02‰ 
案例4
144
0.04‰ 
0.29‰ 
0.24‰ 
我不知道这些额外的2个div类行来自何处。您是否有任何线索以及如何防止它们出现(显示除外:无)


谢谢。

在使用引导样式时,默认情况下会为选项添加该值

如果未使用搜索、分页和信息控件,则可以使用以下选项替代默认布局

dom: 'rt'
有关更多信息,请参阅