Datatables | dynamically generated column show/hide buttons

dt_show_hide_columns.js

var $t = $('#datatable');
var $dt = $t.DataTable();

/*===================*/
/* Show/hide buttons */
/*===================*/
var $toolbar = $("<div class='toolbar'></div>");
$dt.columns().every(function () {
    var that = this;
    console.log(that.header().innerHTML);
    $toolbar.append(
        "<button class='btn btn-sm btn-default "
        + (that.visible() ? 'active' : '')
        + "' name='column-toogle' data-toggle='button' data-column='"
        + that.index()
        + "'>" + that.header().innerHTML
        + "</button>"
    )
});
$("#datatable-gestavs-contrat-select_wrapper").prepend($toolbar);
// Set button actions.
$('button[name="column-toogle"]').on('click', function () {
    // Get column index.
    var column = $dt.column($(this).attr('data-column'));
    // Toggle visibility.
    column.visible(!$(this).hasClass('active'));
});