我不了解我的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类行的来源。你有任何线索,我怎么能阻止他们出现(除了显示:没有他们)
感谢。
答案 0 :(得分:3)