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/