DataTable Footer create through options?

DataTable Footer create through options?

ChickenMobileChickenMobile Posts: 7Questions: 3Answers: 0

So I am creating a 'scrolltable' DataTable on the page with information grabbed from an ajax call.

//Initialize table
var table = $("#table").DataTable({
    deferRender: true,
    sDom: "t" +
        "<'dt-toolbar-footer' i " +
        "<'dataTables_info total'>" +
        ">" + "S",
    language: {
        searchPlaceholder: "Search",
        search: "_INPUT_" //no label
    },
    scrollY: 250,
    scrollX: true,
    scrollCollapse: false,
    autoWidth: true,
    data: wholeData,
    aoColumns: columns,
    order: order,
    footerCallback: footerCallback
}); // END TABLE /////////////////

Cannot for the life of me figure out how to generate a footer within these options: DataTable Options.

How do I create a footer without placing <tfoot> tags inside the HTML?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin
    Answer ✓

    There are no options to create a footer using the options at the moment I'm afraid. It is something I hope to address in future, but at the moment you would need to create it using standard jQuery / DOM methods.

    The reason for this is that many footers are complex (colspan / rowspan) and providing support for that would be really hard.

    Allan

  • ChickenMobileChickenMobile Posts: 7Questions: 3Answers: 0

    Thanks allan. What I did to solve it was just loop through each of my columns and dynamically create a DOM before initializing the DataTable.

    var footer = $("<tfoot></tfoot>").appendTo("#table");
    var footertr = $("<tr></tr>").appendTo(footer);
    
    //Add footer cells
    for (var i = 0; i < Columns.length; i++) {
        $("<td>"+Columns.FooterText+"</td>").appendTo(footertr);
    }
    

    Bit of a shame though...

This discussion has been closed.