如何返回所有列名称/标题(并避免"TypeError:table.columns(...).names不是函数")? [英] How to return all column names/titles (and avoid "TypeError: table.columns(...).names is not a function")?

问题描述

我有一个非常类似于此问题的问题.

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

I create a datatable, then the user can use the search function, click a button and the selected data will then be sent to another function where it is further processed. Initializing the table works fine, also sending the selected data works as intended. However, I fail to access the column names correctly.

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

That's the datatables version I use:

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

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

A bit of background: By clicking on a link (#calculate), a table is created and the column headers look fine, e.g. like this:

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

The user can then select entries (here 88), and the filtered data are then sent back using a second link (#send_data). The data used to initialize the column headers look like this (taken from 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()时，我会收到

and I can also access table.columns(), however, when I try table.columns().names() or table.columns().title() I receive

TypeError:table.columns(...).names不是函数.

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

如何访问和传递显示的列标题，即下面代码中对col_names的内容?

How can I access and pass the displayed column headers i.e. what goes to col_names in the code below?

相关代码如下:

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

推荐答案

以下是可能的解决方案:

Here is a possible solution:

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

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

I used the API docs from DataTable. Replacing innerText with innerHTML also works.

这篇关于如何返回所有列名称/标题(并避免"TypeError:table.columns(...).names不是函数")?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！