2017-05-03 71 views
-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> 

` Blue spaces on the top and bottom and when I inspect element I can see added where as its not in my code

+0

更多的但我仍然可以看到佔用空間你可以發佈一個小提琴? –

+0

作爲一個zend框架將會很困難,我很難複製它 –

+0

https://jsfiddle.net/3tngxw82/ –

回答

1
.dataTables_wrapper .row-fluid:first-child {paddding:0px} 
+1

非常感謝。這項工作對我來說。 :) –