javascript - How to return all column namestitles (and avoid "TypeError: table.columns(...).names is not a function&

admin管理员组

文章数量:1335402

I have a very similar question to this one.

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=".10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

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

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

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

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

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

The relevant code looks as follows:

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

I have a very similar question to this one.

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/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

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

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

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

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

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

The relevant code looks as follows:

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

• javascript
• jquery
• datatables

Share Improve this question Follow edited Mar 14, 2018 at 10:10 Cleb asked Mar 14, 2018 at 10:01 ClebCleb 26.1k2323 gold badges124124 silver badges162162 bronze badges 10

• Are you using this jQuery plugin? If so take a look at this. – Filip Milovanović Commented Mar 14, 2018 at 10:17
• @FilipMilovanović: That works with console.log, thanks. It then contains e.g. aria-label="C1: activate to sort column descending". Any idea how I now extract all those aria-label entries for each column? Or would I have to send it then using e.g. table.columns().header().html() and then parse it myself? – Cleb Commented Mar 14, 2018 at 10:22
• Yep, you could parse yourself - this would give you an array of the header texts: table.columns().header().map(function(h) {return h.innerHTML}) – colin0117 Commented Mar 14, 2018 at 10:32
• Try this: $(table.columns().header()).find('th').map(function(idx, e) { return $(e).attr('aria-label'); }) – Filip Milovanović Commented Mar 14, 2018 at 10:42
• @colin0117: Thanks, the following seems to work: col_names: JSON.stringify(table.columns().header().map(function(h) {return h.innerHTML}).toArray()). Feel free to add this as an answer. – Cleb Commented Mar 14, 2018 at 10:43

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

Here is a possible solution:

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

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

Extracting the table headers from the HTML table seems kind of hackish; based on your code, I think you can do something like this instead; at the part where you initialize the table variable just add one more line to retain the column list from the JSON data you obtained:

table = $("#a_nice_table").DataTable({
            data: data.my_table,
            columns: data.columns
        });

table.columns = data.columns;  // dynamically add a property, store columns

Then you should be able to just do:

col_names: JSON.stringify(table.columns)

Or some variant of that, depending on exactly what kind of data structure is contained in data.columns (if it's a simple array, it should work fine).

I had to get an array of all column names using the DataTables .settings() method.

I ended up doing the following:

// Initialise your table and set up column names.
const yourTable = $('#yourTableID').DataTable({
   columns: [
        {name: 'FirstName'},
        {name: 'LastName'},
   ]
});

// Get your table's settings
const settings = yourTable.settings();

// Map through the settings.aoColumns object and return each column.name
const columnNames = settings.aoColumns.map((column) => {
    return column.name;
});

console.log(columnNames) // prints: ['FirstName', 'LastName']

本文标签：