數據表按鈕中斷搜索功能

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. 您不要求DataTables將按鈕實際插入DOM中。 這就是為什么他們不露面。

您必須在“ dom”選項中添加大寫字母“ B”。 有關更多信息和其他實現方法，請參見“ 按鈕擴展 ”上的“顯示按鈕”部分。

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

}）；

2. 您沒有使用正確的預定義選項，這是代碼中斷的原因。 您必須使用“ excel”而不是“ xls”選項。

如果要將Excel按鈕的默認按鈕名稱更改為XLS，則必須以其他方式啟動按鈕。 請參見“按鈕”參考頁上的示例 。 一種方法是這樣做：

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

}）；

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

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