$(api.column(0).footer()) is not returning when footer is created dynamically datatables-CodePudding

I am trying to get a cell of footer using this $(api.column(0).footer()) method.

It usually returns the footer cell of that column.

But when the footer is created dynamically

I am getting null instead of the cell

I am creating the table in following way:

<table  id="improved-sales-view">
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

const improved_sales_view_table = $("#improved-sales-view").DataTable({
    deferRender: true,
    ajax: {
        url: "/api/sales",
        dataSrc(data) {
            return data.data;
        }
    },
    columns: [
        {
            visible: false,
            title: "Id",
            data: "id"
        },
        {
            title: "Invoice No",
            data: {
                _: "invoice_id",
                display: "invoice_no"
            }
        },
        {
            title: "Date",
            data: "date"
        },
        {
            title: "Customer",
            data: "customer_name"
        },

        // ... more rows


        {
            title: "Grand Total",
            name: "grand_total",
            className: "grand_total_column",
            data: "grand_total"
        },
    ],
    initComplete() {
        $(this).find("tfoot").html($(this).find("thead tr").clone());
    },
    footerCallback() {
        const api = this.api();

        console.log(api.column(0).footer());
        // api.column(0).footer() this returning null
    }
});

CodePudding user response：

You can create the footer from columns array before initializing the datatable. Try this

const columns = [
    {
        visible: false,
        title: "Id",
        data: "id"
    },
    {
        title: "Invoice No",
        data: {
            _: "invoice_id",
            display: "invoice_no"
        }
    },
    {
        title: "Date",
        data: "date"
    },
    {
        title: "Customer",
        data: "customer_name"
    },

    // ... more rows
    {
        title: "Grand Total",
        name: "grand_total",
        className: "grand_total_column",
        data: "grand_total"
    },
];

// create tfoot row
$("<tr>").append(columns.map(col => $("<th>").text(col.title))).appendTo("#improved-sales-view tfoot");

// init datatable
const improved_sales_view_table = $("#improved-sales-view").DataTable({
    deferRender: true,
    ajax: {
        url: "/api/sales",
        dataSrc(data) {
            return data.data;
        }
    },
    columns: columns,
    footerCallback() {
        const api = this.api();

        console.log(api.column(0).footer());
        // api.column(0).footer() this returning null
    }
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<table  id="improved-sales-view">
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>