draw event — how to access main scope?

Konstantin_Sal

Hi! I really need your help with accessing DataTables scope from a draw event. For a function to get a count of visible columns, which then creates needed count of <th> in <tfoot>.
On a screenshot attached you can see that lower underlined example works fine. But upper don't. I tried a lot of combinations, but nothing helps.
Maybe draw attribute (event) is kind of low accessible? Because I can't even place a function () {} in it, only a function name.

kthorngren

There is not a draw configuration option. I think you are wanting to use the drawCallback option instead. There is a draw event that is instantiated outside of the Datatables configuration options. They both are effectively the same. Try changing draw to drawCallback.

Kevin

Konstantin_Sal

Thank you, Kevin. I was blind using draw ).

But I still can't find the way to dynamically create footer and fill it with sum.
There might be different count of columns. So a universal solution is very needed.
Would appreciate any help.

My index.php has just a table like that:
<table id="data_table" class="data_table_id display compact cell-border"><tfoot></tfoot></table>

Then nearby script.js has a DataTable definition. All the json data comes to table from ajax request.

And finally I'm creating tfoot > tr > th in drawCallback function to the tfoot table, which is below the main one. And then in footerCallback function I try to fill footer with sum and average, and nothing happens...

Maybe I'm doing something wrong?

Here is the code of callback functions:

drawCallback:     function (settings) {
    let visibleColumns = this.api().columns(':visible').count();
    var t              = document.querySelector(".dataTables_scrollFoot .data_table_id");
    console.log(t);
    var footer         = t.createTFoot();
    var row            = footer.insertRow(0);

    [...Array(visibleColumns).keys()].forEach(() => {
        let th = document.createElement('th');
        th.classList.add('dt-body-right');
        row.append(th)
    });
},

footerCallback: function (row, data, start, end, display) {
    var api = this.api();

    api.columns('.sum', {page: 'current'}).every(function () {
        var sum = this
        .data()
        .reduce(function (a, b) {
            var x = parseFloat(a) || 0;
            var y = parseFloat(b) || 0;
            return x + y;
        }, 0);

        if (sum > 0) {
            // $(this.footer()).html(sum.toFixed(1));
            $(this.footer()).html(111);
        }
    });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

The main problem is that Datatables doesn't recognize the footer unless its present in the DOM before Datatables initialization. Meaing that the column().footer() (this.footer())) won't work. In addition things like the Export buttons won't export the footer unless it existed before initialization. Its not efficient to create the footer each time the table is drawn, which happens a lot, anytime you sort, search or page.

It would be best to create the footer before initializing Datatables. However if you want to create the footer after initialization then take a look at this example:
http://live.datatables.net/fatalohu/9/edit

It creates the footer in footerCallback but only if it doesn't exist. Note also that this.footer() is not used but a standard jQuery selector to select the footer's cell, ie, '#example tfoot th:eq(0)'.

Kevin