javascript - 如何返回所有列名/标题(并避免 "TypeError: table.columns(...).names is not a function")？

Question

我有一个与 this one 非常相似的问题.

我创建了一个数据表，然后用户可以使用搜索功能，单击一个按钮，然后所选数据将被发送到另一个功能，在那里进一步处理。初始化表工作正常，也发送选定的数据 works as intended .但是，我无法正确访问列名。

这是我使用的数据表版本:

 <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

一些背景: 通过单击一个链接 (#calculate)，将创建一个表并且列标题看起来不错，例如像这样:

然后用户可以选择条目(此处为 88)，然后使用第二个链接(#send_data)将过滤后的数据发回。用于初始化列标题的数据如下所示(取自 console.log(data.columns);):

[…]
0: Object { name: "C1", title: "C1", sName: "C1", … }
1: Object { name: "C2", title: "C2", sName: "C2", … }
length: 2
__proto__: Array []

我也可以访问 table.columns()，但是，当我尝试 table.columns().names() 或 table.columns( ).title() 我收到了

TypeError: table.columns(...).names is not a function.

我如何访问和传递显示的列标题，即下面代码中的 col_names 是什么？

相关代码如下:

<script type="text/javascript">
  $(document).ready(function() {
    var table = null;
    $('#calculate').bind('click', function() {
      $.getJSON('/_get_table', {
        a: $('#a').val(),
        b: $('#b').val()
      }, function(data) {
      console.log(data.columns);
        $("#elements").text(data.number_elements);
        if (table !== null) {
          table.destroy();
          table = null;
          $("#a_nice_table").empty();
        }
        table = $("#a_nice_table").DataTable({
          data: data.my_table,
          columns: data.columns
        });
      });
      return false;
    });
    $('#send_data').bind('click', function() {
        //console.log(table.columns());
        //console.log(table.columns().title());
        //console.log(table.columns().names());
      $.getJSON('/_selected_data', {

        sel_data: JSON.stringify(table.rows( { filter : 'applied'} ).data().toArray()),
        col_names: //what goes here?

      }, function(data) {
        alert('This worked')
      });
      return false;
    });
  });
</script>

Answer 1

这是一个可能的解决方案:

table.columns().header().toArray().map(x => x.innerText)

我使用了来自 DataTable 的 API 文档.将 innerText 替换为 innerHTML 也可以。