jQuery Javascript HTML 5導出按鈕不會出現並刪除其他按鈕

Question

我目前正試圖添加一些導出按鈕到我的數據表中。

我已加載例如所有正確的JS和CSS文件

<!--Table JS & CSS--> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/jquery-1.12.3.js"></script> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/jquery.dataTables.min.css"/> 

<!--Button JS & CSS--> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/dataTables.buttons.min.js"></script> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/jszip.min.js"></script> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/pdfmake.min.js"></script> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/vfs_fonts.js"></script> 
    <script src="../plugins/DataTables/DataTables-1.10.12/js/buttons.html5.min"></script> 
    <link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/buttons.dataTables.min.css"/> 

當我加載JS時，它刪除了我的「條目」功能和「模糊搜索」功能。

它也沒有顯示HTML5按鈕？

的JavaScript是如下

<script> 
$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example thead th').each(function() { 
     var title = $(this).text(); 
     $(this).append('<input type="text" class="filter_box" placeholder="Filter" />'); 
    }); 

    // DataTable 
    var table = $('#example').DataTable(
    { 
     //Set display length 
     "iDisplayLength": 100 

    } 
    ); 

    // Apply the search 
    table.columns().every(function() { 
     var that = this; 

       $('input', this.header()).on('click', function(e) { 
      e.stopPropagation(); 
     }); 

     $('input', this.header()).on('keyup change', function() { 

      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
}); 
</script> 

如果我刪除下面的JavaScript，然後在頁面加載OK例如以「項」功能和「模糊搜索」的功能，但顯然沒有任何HTML5按鈕

//Set Button settings 
dom: 'lBfrtip', 
buttons: [ 
    'copyHtml5', 
    'excelHtml5', 
    'csvHtml5', 
    'pdfHtml5' 
] 

數據來自HTML表格例如

<table width="100%" class="compact stripe hover row-border order-column" id="example"> 
    <thead class="results_thead"> 
     <tr> 
      <th>W/h<br></th> 
      <th>Product<br></th> 
      <th>Description<br></th> 
      <th>Free Stock<br></th> 
      <th>On Order Qty<br></th> 
      <th>Make or Buy<br></th> 
      <th>Last Trans Date<br></th> 
      <th>Last Trans Type<br></th> 
      <th>Analysis B<br></th> 
      <th>Next Order No<br></th> 
      <th>Next On Order Qty<br></th> 
      <th>Next Date Req<br></th> 
     </tr> 
    </thead> 
    <tbody class="results_tbody"> 
     <tr style="text-align: center"> 
      <td>'.$row['warehouse'].'</td> 
      <td>'.$row['product'].'</td> 
      <td>'.$row['description'].'</td> 
      <td>'.$row['negative_free_stock'].'</td> 
      <td>'.$row['on_order_qty'].'</td> 
      <td>'.$row['make_or_buy'].'</td> 
      <td>'.$row['last_transaction_date'].'</td> 
      <td>'.$row['last_transaction_type'].'</td> 
      <td>'.$row['analysis_b'].'</td> 
      <td>'.$row['next_order_no'].'</td> 
      <td>'.$row['next_on_order_qty'].'</td> 
      <td>'.$row['next_date_required'].'</td> 
     </tr>'; 
</tbody> 
</table> 

因此，我認爲問題在於上面的代碼？

任何想法非常讚賞

Bepster

Answer 1

I have solve the problem by changing html table structure 
    you can see the Demo 

http://jsfiddle.net/dipakthoke07/ebRXw/2229/