datatables按鈕打破搜索功能

Question

我想添加下載按鈕到我的表，但是當我這樣做時，我的列搜索功能打破和按鈕不顯示。我也嘗試使用DOM實現按鈕，但取代了我的表格大小下拉列表。

$(document).ready(function() { 
    var table = $('#myTable').DataTable({ 
     "buttons": [ 
      "copy", 
      "csv", 
      "xls", 
      "pdf" 
     ] 
    }); 
    $('#search-category').on('change',function(){ 
     table 
     .column(3) 
     .search(this.value) 
     .draw(); 
    }), 
    $('#search-sub-category').on('change',function(){ 
     table 
     .column(4) 
     .search(this.value) 
     .draw(); 
    }) 
}); 

（無按鈕：https://jsfiddle.net/jkczwtbt/） 任何指針在那裏我不理解的文件？

https://datatables.net/reference/button/excel
https://datatables.net/reference/option/buttons.dom

Answer 1

有你錯過了兩件事情。

1. 您不要求DataTable將實際插入到DOM中的按鈕。這就是爲什麼他們不出現。

您必須添加大寫「B」的「dom」選項。有關更多信息和其他實現方法，請參見Buttons Extansion上的「顯示按鈕」部分。

$('#myTable').DataTable({ 
dom: 'Bfrtip', 
buttons: [ 
    'copy', 'excel', 'pdf' 
] 

}）;

1. 您不使用正確的預定義選項，這是代碼中斷的原因。你必須使用「excel」而不是「xls」選項。

如果要將Excel按鈕的默認按鈕名稱更改爲XLS，則必須以不同的方式啓動該按鈕。請參閱Examples on the Buttons reference page。一種方式是這樣做：

$('#myTable').DataTable({ 
buttons: [ 
    { 
     extend: 'excel', 
     text: 'XLS' 
    } 
] 

}）;

您可以在JSFiddle找到一個工作結果。

var table = $('#myTable').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
    'copy', 
    { 
     extend: 'excel', 
     text: 'XLS' 
    } 
    ] 
});