If anyone wants to have fixed table headers in a list (i.e list column headers always visible and fixed at top of window when scrolling down) - here's some javascript/jquery code to do the trick. (Only tested with the default bootstrap list template).
Update note: See Post #33 in this thread. I updated the script to work with tables that have included embedded filters in the table header, toggle column display, fixed table footer, and/or an existing fixed menu bar.
Replace all instances of TABLEID in this code with the id of the html table that is used by the fabrik list being displayed (e.g. use firebug to cut/paste the table id exactly as shown in the <table> tag of your form).
Then just put this code in the list_##.js file for the list you want to use it in.
You will also want to add some css for this 'fixed' thead element, to spruce it up a bit. (It is transparent otherwise). It seemed to affect operations when added via jQuery - so I just put it in the css stylesheet for the list template. e.g....
table#TABLEID thead {
background-color:#ffffff;
}
With a little more work this could be incorporated as an option in the fabrik list model. (hint hint)
Update note: See Post #33 in this thread. I updated the script to work with tables that have included embedded filters in the table header, toggle column display, fixed table footer, and/or an existing fixed menu bar.
Replace all instances of TABLEID in this code with the id of the html table that is used by the fabrik list being displayed (e.g. use firebug to cut/paste the table id exactly as shown in the <table> tag of your form).
Then just put this code in the list_##.js file for the list you want to use it in.
Code:
jQuery(document).ready(function(){
window.headerHeight = jQuery("table#TABLEID thead").innerHeight();
window.eTop = jQuery("table#TABLEID tbody").offset().top;
window.tableWidth = jQuery("table#TABLEID").width();
jQuery(window).scroll(function(event){
window.bodyTop = jQuery(this).scrollTop();
window.thisTop = window.eTop - jQuery(window).scrollTop(); //position of the ele window
// Use for debugging
//console.log("headerHeight::"+window.headerHeight+" | bodyTop::" + window.bodyTop + " | eTop::"+window.eTop+" | thisTop::"+thisTop);
if (window.thisTop < window.headerHeight ) {
jQuery("table#TABLEID thead").css({"position":"fixed","top":"0px","z-index":"9999"});
var k = 0;
jQuery("table#TABLEID").width(window.tableWidth);
jQuery("table#TABLEID thead tr th").each(function ()
{
jQuery(this).width(window.hcol[k]);
k++;
});
}else{
jQuery("table#TABLEID thead").css({"position":"relative","top":"0px","z-index":"9999"});
}
});
/* resets header on window resize */
jQuery(window).on('resize', function(){
jQuery("table#TABLEID thead").css({"position":"relative","top":"0px","z-index":"9999"});
setHeaders();
});
setHeaders();
/* (Optional) This scrolls the table header to the top on load */
jQuery(this).scrollTop(window.eTop - window.headerHeight);
});
function setHeaders() {
// initialize table header column widths
window.hcol = new Array();
var xwidth = 0;
var k = 0;
jQuery("table#TABLEID thead tr th").each(function (){
xwidth = jQuery(this).width();
window.hcol[k] = xwidth;
k++;
});
}
You will also want to add some css for this 'fixed' thead element, to spruce it up a bit. (It is transparent otherwise). It seemed to affect operations when added via jQuery - so I just put it in the css stylesheet for the list template. e.g....
table#TABLEID thead {
background-color:#ffffff;
}
With a little more work this could be incorporated as an option in the fabrik list model. (hint hint)