title: DataTables add extra column using columnDefs not working
body: <p>In WordPress, I am loading data with ajax in <a href="https://datatables.net/" rel="nofollow noreferrer">DataTables</a> and all working fine with the ajax. Now I am trying to add one button to the order list so when admin clicks it will generate a PDF invoice. For that, I want to add additional columns to the <code>datatable</code>. Referring to the document I am trying to use <code>columnDefs</code> to add button as mentioned in <a href="https://datatables.net/examples/ajax/null_data_source.html" rel="nofollow noreferrer">doc</a>. </p>
  
  <h1>HTML</h1>
  
  <pre><code>...
  &lt;th class="heading-photo"&gt;&lt;?php _e('Order Number', 'group-shop') ?&gt;&lt;/th&gt;
  &lt;th class="heading-group"&gt;&lt;?php _e('Gift', 'group-shop') ?&gt;&lt;/th&gt;
  &lt;th class="heading-total-price"&gt;&lt;?php _e('Total Price', 'group-shop') ?&gt;&lt;/th&gt;
  &lt;th class="heading-delete"&gt;&lt;?php _e('Status', 'group-shop') ?&gt;&lt;/th&gt;
  &lt;!-- This column I have set to add Invoice button using columnDefs --&gt;
  &lt;th class="heading-invoice invoice"&gt;&lt;?php _e('Invoice', 'group-shop') ?&gt;&lt;/th&gt;
  ...
  </code></pre>
  
  <h1>Javascript</h1>
  
  <pre><code>$('#gsAllOrdersTable').DataTable({
      ajax: {
          url: ajax_vars.ajax_url + '?action=gs_orders_dt_server'
      },
      columns: [
          {data: 'order_number'},
          {data: 'gifts'},
          {data: 'total_price'},
          {data: 'status'},
      ],
      columnDefs: [{target: -1, data: null, defaultContent: '&lt;button&gt;Click!&lt;/button&gt;'}],
      lengthMenu: [[2, 10, 25, 50, -1], [2, 10, 25, 50, "All"]],
      initComplete: function () {
          this.api().columns().every(function () {
              var column = this;
              var input = document.createElement("input");
              input.className = 'form-control';
              $(input).appendTo($(column.footer()).empty())
                  .on('change', function () {
                      column.search($(this).val(), false, false, true).draw();
                  });
          });
      }
  });
  </code></pre>
  
  <blockquote>
    <p><strong>Question:</strong></p>
    
    <p>How to add additional column/s to datatable?</p>
  </blockquote>