DataTables 使用 columnDefs 添加额外的列不起作用

Question

在 WordPress 中，我在 DataTables 中使用 ajax 加载数据，并且使用 ajax 一切正常。现在我正在尝试在订单列表中添加一个按钮，这样当管理员单击它时，它将生成一张 PDF 发票。为此，我想向datatable 添加其他列。参考我正在尝试使用columnDefs 添加按钮的文档，如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();
                });
        });
    }
});

问题：

如何向数据表添加额外的列？

Answer 1

您需要在

中再添加一列

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

另一种方法。

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