html 带有Ajax数据的DataTables摘要页脚行

Posted 2021-05-11

$(document).ready(function () {
    myTable.DataTable({
        ajax: {
            url: '/order/items',
            type: 'GET',
            dataType: 'json',
            data: {
                orderId: orderId.val()
            },
        },
        columns: [
            {title: 'Description', data: 'description'},
            {title: 'Quantity', data: 'quantity', className: 'text-right'},
            {title: 'Weight', data: 'wgt', className: 'text-right', render: $.fn.dataTable.render.number( ',', '.', 0 )}
        ],
        footerCallback: function( tfoot ) {
            var response = this.api().ajax.json();
            if(response){
                var $th = $(tfoot).find('th');
                $th.eq(5).html(response['userdata']['qtyNow']);
            }
        }
    });
});

<div class="table-responsive">
    <table id="myTable" class="table table-striped table-bordered table-hover">
        <thead></thead>
        <tbody></tbody>
        <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        </tfoot>
    </table>
</div>