I have created a table using displaytag. I want to make the table header or column headers fixed and only the body of the table should be scrolled.I am able to make the div containing the table as scrollable. But when scrolling the header of the table also scrolls. It does not remain fixed.I tried some ways. But I did not get any luck.Could anyone help me with this? Thanks in advance.
My code:
<div id="ratesTableDiv" style="overflow-y: auto;height:250px;" >
<display:table class="tablesorter" export="false" id="data" class="displayTableBorder"
summary="This is the only table in the rates tab. It has the rates data for the selected plan." style="width:700px;"
name="PlanSummaryDTO.planRateList" uid="rates" rules="rows"
requestURI="PlanSummary"
decorator="com.cgi.hix.web.decorators.PortalHomePlansDecorator">
<display:setProperty name="paging.banner.placement" value="bottom" />
<display:setProperty name="basic.empty.showtable" value="true" />
<display:setProperty name="paging.banner.onepage" value="" />
<display:setProperty name="paging.banner.no_items_found" value="" />
<display:setProperty name="paging.banner.one_item_found" value="" />
<display:setProperty name="paging.banner.all_items_found" value="" />
<display:setProperty name="paging.banner.some_items_found" value="" />
<display:setProperty name="paging.banner.group_size" value="5" />
<display:setProperty name="paging.banner.full"
value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">◄◄</a> <a id="singlePrevRates" class="prev" href="{2}">◄</a> {0} <a id="singleNextRates" class="next" href="{3}">►</a> <a id="doubleNextRates" class="next" href="{4}">►► </a></span></span></p>' />
<display:setProperty name="paging.banner.first"
value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">◄◄</a> <a id="singlePrevRates" class="prev" href="{2}">◄</a> {0} <a id="singleNextRates" class="next" href="{3}">►</a> <a id="doubleNextRates" class="next" href="{4}">►► </a></span></span></p>' />
<display:setProperty name="paging.banner.last"
value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">◄◄</a> <a id="singlePrevRates" class="prev" href="{2}">◄</a> {0} <a id="singleNextRates" class="next" >►</a> <a id="doubleNextRates" class="next" >►► </a></span></span></p>' />
<display:caption media="html" class="captionHide">Rates</display:caption>
<display:setProperty name="paging.banner.page.separator"
value=" | " />
<display:setProperty name="paging.banner.group_size" value="4" />
<display:column property="age" scope="colgroup" headerScope="colgroup" title="${age}"
headerClass="hixTableHeader "
style="width: 10%;align: center;" class="displayTagtd" />
<display:column property="usesTobacco" scope="colgroup" headerScope="colgroup" title="${tobacco}"
headerClass="hixTableHeader" style="width: 30%;align: center;"
class="displayTagtd" />
<display:column property="rateAreaId" scope="colgroup" headerScope="colgroup" title="${ratingArea}"
headerClass="hixTableHeader" style="width: 15%;align: center;"
class="displayTagtd" />
<display:column property="rateAmount" scope="colgroup" headerScope="colgroup" title="${individualRate}"
headerClass="hixTableHeader"
style="width: 20%;align: center;" class="displayTagtd" />
<display:column property="individualTobaccoRate" scope="colgroup" headerScope="colgroup" title="${individualTobaccoRate}"
headerClass="hixTableHeader"
style="width: 30%;align: center;" class="displayTagtd" />
</display:table>
</div>
Using a div and setting the overflow-y and height, I am able to get a scrollbar. But the header of the table also scrolls.How can the header be made fixed?
I tried the following code :
Now the header is fixed and it does not scroll with the body. But the width of the each column header differs from the width of the each column body.Is there any way to resolve this?
$(document).ready(function()
{ scrolify($('#ratesTableDiv'), 250);
});
function scrolify(tblAsJQueryObject, height){
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with <div> in the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css('overflow-y','scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
}
