2
Я создал таблицу с использованием displaytag. Я хочу, чтобы заголовки заголовка таблицы или столбца были исправлены, и нужно прокручивать только тело таблицы. Я могу сделать div, содержащий таблицу, прокручиваемой. Но при прокрутке заголовка таблицы также прокручивается. Он не остается фиксированным. Я пробовал несколько способов. Но мне не повезло. Может ли кто-нибудь помочь мне с этим? Спасибо заранее.Как исправить заголовок столбца в таблице displaytag
Мой код:
<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>
Использование DIV и установка перепускной-й и высоту, я могу получить скроллбар. Но заголовок таблицы также прокручивается. Как заголовок может быть исправлен?
Я попытался следующий код:
Теперь заголовок фиксирован и не прокручивается с телом. Но ширина каждого заголовка столбца отличается от ширины каждого тела столбца. Есть ли способ разрешить это?
$(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"));
});
}
Вашего пример кода не совсем выразительная, пожалуйста, добавьте еще некоторые данные, чтобы мы могли запустить свой код и протестировать поведение. – Coxer
Вот и весь код, который у меня есть в теле моего jsp – kishore
1. Возможно, вы должны набросать в своем вопросе, что используете jsp 2. Добавьте некоторые примеры данных, чтобы описать проблему. – Coxer