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.
Print article | This entry was posted by elvis on 03/01/18 at 08:15:00 pm . Follow any responses to this post through RSS 2.0. |