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

你错过了两件事。

您不要求DataTable实际将按钮插入DOM。这就是他们不能出现的原因。

你必须添加＆＃34; dom＆＃34;选择资本＆＃34; B＆＃34;。参见＆＃34;显示按钮＆＃34;在Buttons Extansion上获取更多信息和其他实施方法。

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

}）;

您没有使用正确的预定义选项，这是您的代码中断的原因。你必须使用＆＃34; excel＆＃34;而不是＆＃34; xls＆＃34;选项。

如果要将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'
    }
  ]
 });

数据表按钮打破搜索功能

1 个答案: