2017-09-14 24 views
2

私のブートストラップ3.3.7 +データテーブル1.10.15テーブルの動作を理解できません。データテーブル/ブートストラップテーブルの空の行

<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値で注文すると、応答するようにし、直接すべて表示するには、ページ付けと検索を隠すために、私はこのスクリプトを使用しています:ここで

は私の最初のHTMLの表であります行。スクリプトが初めとテーブルの最後に2つの空のdivクラスの行を追加している理由を私は理解できない何

<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 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クラスの行がどこから来るのかわかりません。何か手掛かりがありますが、どうすればそれらが表示されるのを防ぐことができますか(ディスプレイを除く:なし)

ありがとうございました。

答えて

2

ブートストラップスタイリングを使用している場合、これはデフォルトでdomオプションの値として追加されます。

検索、ページ設定、および情報コントロールを使用していない場合は、デフォルトのレイアウトを次のオプションで上書きできます。

dom: 'rt' 

詳細については、official documentationを参照してください。

+0

ありがとうございました。 – user7334566