How to add <tfoot> dynamically in jQuery DataTables?

Question

Here is my code:-

function get_dataset(data){
    columns_1 = [{}];
    dataset = [];
    keys = Object.keys(data);
    arr = Object.keys(data[keys[0]]);
    for (i = 0; i < arr.length; i++) {
        columns_1.push({
            'title': arr[i],
        });
    }
    for (i = 0; i < keys.length; i++) {
        local_arr = [];
        local_arr.push(keys[i]);
        for (j = 0; j < arr.length; j++) {
            local_arr.push(data[keys[i]][arr[j]]);
        }
        dataset.push(local_arr);
    }
    return dataset
}

function handleReportSuccess(data) {
    var dataset = get_dataset(data);
    datatable = $('#restaurant_number_table').DataTable({
        data: dataset,
        columns: columns_1
    });
    $('.reviews-cont').show();
}

Here is the current result: enter image description here

The result i want is to have "thead" columns: "active", "deleted", "editing", "inactive", "temporarily_inactive" in "tfoot" as well, can you please help me to accomplish this ?

Answer 1

You can do it like below:-

$("#datatable-id").append(
    $('<tfoot/>').append( $("#datatabale-id thead tr").clone() )
);

Example:-

$("#datatable-id").append(
    $('<tfoot/>').append( $("#datatabale-id thead tr").clone() )
);

$(document).ready(function() {
    $('#example').DataTable();
    $("#example").append(
      $('<tfoot/>').append( $("#example thead tr").clone() )
    );
} );