Javascript 数据表下拉列表问题

我正在使用这段代码尝试为jQuery数据表中的所有列实现下拉列表

var-table=$（'#myTable'）.DataTable({
dom:'lfBrtip'，
按钮：[
{
扩展：“复制”，
页脚：对
},
{
扩展：“csv”，
页脚：对
},
{
扩展：“excel”，
页脚：对
},
{
扩展：“pdf”，
页脚：对
}
],
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
var列=此；
变量选择=$（“”）
.appendTo（$（column.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
} );
.......
}

I正如您在图片中所看到的那样，这方面存在问题：

1.单击下拉列表可对列进行排序，我不希望这样。

2.在导出中插入按钮。

我做错了什么，或者我如何纠正它？也许是一个解决办法

---

用按钮更新：[]

试试下面的按钮

$（选择）.children（'option'）.append（…）

而不是

select.append(

---

我不确定是否有更好的方法来实现这一点，但以下是我想到的

您可能需要查看api参考。我使用了

格式

选项，以便按如下方式格式化标题列：

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');

这是页面

编辑

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

我对你的按钮列表做了一个小小的修改

{
    extend: 'excel',
    footer: true
},

与

另外，我已经删除了下面的代码，因为它不再需要了

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

---

这是你的

的更新版本，它有一个更奇怪的效果：我盯着它看了20分钟…aaa我必须说我不知道这应该做什么，也不知道如何实现它。很抱歉，我是datatables的新手，也是javascript的新手。你可以在上面的代码之后添加代码部分，看看它是否有效ks。我在答案中添加了一个演示页面链接。只需点击页面末尾的“Excel”按钮。我对其进行了快速测试，看起来这解决了导出问题。我现在正在查看代码。单击下拉列表时，您有没有停止重新排序的解决方案？实际上，您只需要此版本->

$（“thead th”）。每个（函数（i）{$（'select'，this）。单击（函数（事件）{event.stopPropagation（）；}）；}）；

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

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