javascript - 数据表按钮破坏了搜索功能

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'
]

} );

您没有使用正确的预定义选项，这就是您的代码损坏的原因。您必须使用“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'
    }
  ]
 });