DataTables add extra column using columnDefs not working

Question

In WordPress, I am loading data with ajax in DataTables 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 datatable. Referring to the document I am trying to use columnDefs to add button as mentioned in doc.

HTML

...
<th class="heading-photo"><?php _e('Order Number', 'group-shop') ?></th>
<th class="heading-group"><?php _e('Gift', 'group-shop') ?></th>
<th class="heading-total-price"><?php _e('Total Price', 'group-shop') ?></th>
<th class="heading-delete"><?php _e('Status', 'group-shop') ?></th>
<!-- This column I have set to add Invoice button using columnDefs -->
<th class="heading-invoice invoice"><?php _e('Invoice', 'group-shop') ?></th>
...

Javascript

$('#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: '<button>Click!</button>'}],
    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();
                });
        });
    }
});

Question:

How to add additional column/s to datatable?

Josh Josh · Accepted Answer · 2020-04-24T09:48:57

You need to add one more column in

columns [
        {data: 'order_number'},
        {data: 'gifts'},
        {data: 'total_price'},
        {data: 'status'},
{data: 'Invoice'}]

An alternative way to do it.

$(document).ready(function() {
    var table = $('#example').DataTable( {
      
        "columns": [
            { data: "OrderNum" },
            { data: "Gifts" },
            { data: "TotalPrice" },
            { data: "Status" },
            { data: "Invoice",
              render: function(data,type, rowData, meta){
                return '<button>'+data+'</button>' 
              }
            }
        ],
      
    } );
  
  table.rows.add(
  [
    {
      OrderNum: "1",
      Gifts: "Teddy",
      TotalPrice: "$320,800",
      Status: "Approved",
      Invoice: "Sample-data"
    },
    {
      OrderNum: "2",
      Gifts: "Bear",
      TotalPrice: "$320,800",
      Status: "Approved",
      Invoice: "to-append"
    }]
  ).draw();
  });

<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<div class="row">
               <table id="example" class="display" cellspacing="0" width="75%">
        <thead>
            <tr>
                <th>Order Number</th>
                <th>Gifts</th>
                <th>Total Price</th>
                <th>Status</th>
                <th>Invoice</th>
            </tr>
        </thead>
                 <tbody>
                 </tbody>
                       
    </table>
            </div>

DataTables add extra column using columnDefs not working

HTML

Javascript

1 Answers