DataTables - Adding Buttons to a FixedHeader

I was using both the FixedHeader and Buttons extensions of DataTables and I needed the buttons to remain visible when the user scrolled.

The solution I chose was to move the buttons DOM into the table head.

Since the buttons are in a div and thead is part of a table, a tr is used with a td that has a colspan of the entire table.


var dtButtons = document.querySelector(".dt-buttons");
var row, cell;
row = document.createElement("tr");
cell = document.createElement("td");
cell.id = "magic-button-row";
cell.setAttribute("colspan", /*** Put the number of columns in your table here ***/);
cell.appendChild(dtButtons);
row.appendChild(cell);
document.querySelector("#display-table thead").insertBefore(row, document.querySelector("tr:first-of-type"));

There is a tiny bit of CSS, too.

#magic-button-row {
    padding: 0;
    margin: 0;
    text-align: left;
}

This post courtesy of Game Creek Video.