-1
我一起使用bootstrap和jquery數據表。 當數據表格呈現時,它們在上面和下面留下空格。 最初在這些空間中有搜索欄功能(上圖)和分頁功能(下圖)。後來我禁用這些選項,現在他們不出現them`jquery數據表和引導問題
<div class="row-fluid">
<div class="span12">
<div class="widget-header widget-header-flat widget-header-small">
<h5>Over All Summary</h5>
</div>
<div class="widget-body">
<div class="widget-main">
<div>
<table id="example" style='text-align: center' class="display" cellspacing="0" width="100%" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Customer Group</th>
<th># of Customer Contacted</th>
<th># of Customer Responded</th>
<th>Response Rate</th>
<th>Revenue (AED)</th>
<th>AMS</th>
<th>%Customer</th>
<th>%Revenue</th>
<th style='color:#47d147'>Shopping Frequency</th>
<th style='color:#47d147'>ATV</th>
<th style='color:#47d147'>UPT</th>
<th style='color:#47d147'>PPI</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="toggle" id='data1'>+</i> Tiger Nixon
</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
<tr class="data1_hidden hidden_data" style='display:none;' >
<td> Tiger Nixon </td>
<td>Hidden1</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
<tr class="data1_hidden hidden_data" style='display:none;' >
<td> Tiger Nixon </td>
<td>Hidden1</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
<tr class="data1_hidden hidden_data" style='display:none;' >
<td> Tiger Nixon </td>
<td>Hidden1</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
<tr>
<td>
<i class="toggle" id='data2'>+</i> Tiger Nixon
</td>
<td>System Architect2</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
<tr class="data2_hidden hidden_data" style='display:none'>
<td> Tiger Nixon </td>
<td>Hidden2</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>
<i class="toggle" id='data3'>+</i> Tiger Nixon
</td>
<td>System Architect2</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
<tr class="data3_hidden hidden_data" style='display:none'>
<td> Tiger Nixon </td>
<td>Hidden2</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>18thFEb,1990</td>
<td>No</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#example').DataTable({
"ordering": false,
"paging" : true,
"bInfo" : false,
"searching": true,
});
})
</script>
更多的但我仍然可以看到佔用空間你可以發佈一個小提琴? –
作爲一個zend框架將會很困難,我很難複製它 –
https://jsfiddle.net/3tngxw82/ –