title: How to return all column names/titles (and avoid "TypeError: table.columns(...).names is not a function")?
body: <p>I have a very similar question to <a href="https://stackoverflow.com/questions/24325786/table-columns-is-not-a-function-in-datatable-js">this one</a>.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/33169649/how-to-get-filtered-data-result-set-from-jquery-datatable">works as intended</a>. However, I fail to access the column names correctly.</p>
  
  <p>That's the datatables version I use:</p>
  
  <pre><code> &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>A bit of background: 
  By clicking on a link (<code>#calculate</code>), a table is created and the column headers look fine, e.g. like this:</p>
  
  <p><a href="https://i.stack.imgur.com/DxomG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DxomG.png" alt="enter image description here"></a></p>
  
  <p>The user can then select entries (here <code>88</code>), and the filtered data are then sent back using a second link (<code>#send_data</code>). The data used to initialize the column headers look like this (taken from <code>console.log(data.columns);</code>):</p>
  
  <pre><code>[…]
  0: Object { name: "C1", title: "C1", sName: "C1", … }
  1: Object { name: "C2", title: "C2", sName: "C2", … }
  length: 2
  __proto__: Array []
  </code></pre>
  
  <p>and I can also access <code>table.columns()</code>, however, when I try <code>table.columns().names()</code> or <code>table.columns().title()</code> I receive</p>
  
  <blockquote>
    <p>TypeError: table.columns(...).names is not a function. </p>
  </blockquote>
  
  <p>How can I access and pass the displayed column headers i.e. what goes to <code>col_names</code> in the code below?</p>
  
  <p>The relevant code looks as follows:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(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;
      });
    });
  &lt;/script&gt;
  </code></pre>