Question

我正在使用此代码尝试为jQuery-Datatables like in this example中的所有列实现下拉列表。

var table = $('#myTable').DataTable({
        dom: 'lfBrtip',
        buttons: [
        {
            extend: 'copy',
            footer: true
        },
        {
            extend: 'csv',
            footer: true
        },
        {
            extend: 'excel',
            footer: true
        },
        {
            extend: 'pdf',
            footer: true
        }
    ],
        initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
.......
    }

你可以在照片中看到这个问题：

1。单击下拉列表会使列排序，我不希望这样。

2。按钮将插入导出中。

我做错了什么或如何纠正？也许是一种解决方法？

已更新按钮：[]

Answer 1

我不确定是否有更好的方法来实现这一目标，但以下是我提出的建议。

您可能需要查看buttons.exportData() api参考。我已使用format选项格式化标题列，如下所示：

var buttonExp = {
  exportOptions: {
    format: {
      header: function ( data, column, row ) {
        return header[column]; //header is the array I used to store header texts
      }
    }
  }
};

您可能希望格式化data参数以获取标题的文本并删除html，但这一个看起来更干净。然后你需要将标题文本存储在像这样的数组中

var header = [];
header.push("Column Header 1");
header.push("Column Header 2");
header.push("Column Header N");

最后，将按钮绑定到页面上的元素，如下所示

new $.fn.dataTable.Buttons( table, {
        "buttons": [$.extend( true, {}, buttonExp, {
        extend: 'excelHtml5'
    })]
});     

table.buttons(0,null).containers().appendTo('.container');

以下是 demo 页面。

修改

您提供的演示非常接近解决导出问题。但你没有把按钮绑定到dom。因此无法看到页面上的按钮。

我通过替换
对您的按钮列表进行了一些小修改
{ extend: 'excel', footer: true },

与

$.extend(true, {}, buttonExp, { extend: 'excelHtml5' }),

此外，我已删除以下代码，因为不再需要它。

new $.fn.dataTable.Buttons(table, { "buttons": [$.extend(true, {}, buttonExp, { extend: 'excelHtml5' })] });

以下是 demo 的更新版本。

Answer 2

尝试低于一个

$（选择）。儿童（ '选项'）。追加（......）

而不是

select.append（

数据表下拉列表问题

2 个答案: