带有datatables / Bootstrap表的空行

时间:2017-09-14 14:59:58

标签: twitter-bootstrap-3 datatables

我不了解我的bootstrap 3.3.7 + datatables 1.10.15 table的行为。

这是我最初的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 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类行的来源。你有任何线索,我怎么能阻止他们出现(除了显示:没有他们)

感谢。

1 个答案:

答案 0 :(得分:3)

使用Bootstrap样式时,它是dom选项的默认值。

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

>

有关详细信息,请参阅official documentation