数据表按钮破坏搜索功能

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。这就是他们没有出现的原因。

您必须添加带有大写“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'
    }
  ]
 });