我想知道如何在分页栏之间插入<DIV>标记
如果我有，则显示开始结果的实际TABLE
顶部的分页栏。如果我只是将<DIV>标记放在我之前
display：table，它还包括滚动条内的分页内容。
另外，我无法弄清楚如何将样式设置为TBODY，因为它有点
混乱。我不确定你们是否写过这些东西但你能告诉我
如果你有任何想法如何实现这一点。
我的代码是
<display:table id="data1" name="invprbmList" requestURI="" pagesize="10" export="true" style="width:100%;" decorator="org.displaytag.decorator.TotalTableDecorator">
<tr><td><display:setProperty name="paging.banner.item_name">Invoice</display:setProperty>
<display:setProperty name="paging.banner.items_name">Invoices</display:setProperty>
<display:setProperty name="paging.banner.some_items_found"><span class="pagebanner"> {0} Invoices found, displaying {2} to {3}. </span></display:setProperty>
<bean:define id="invoiceNo"><bean:write name="data1" property="invoiceNo"/></bean:define>
<bean:define id="notes"><bean:write name="data1" property="notes"/></bean:define>
<bean:define id="strFlag"><bean:write name="data1" property="strFlag"></bean:write></bean:define>
<display:column title="Invoice No." sortable="true" property="invoiceNo" media="xml csv pdf excel" class="l" headerClass="hl" />
<display:column property="invDate" title="Invoice Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
<display:column media="html" title="Amount" property="invAmount" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
<display:column title="Amount" sortable="true" property="invAmount" media="xml csv pdf excel" class="r" headerClass="hr" />
<display:column property="dueDate" title="Due Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
<display:column media="html" title="Balance" property="balance" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
<display:column title="Balance" sortable="true" property="balance" media="xml csv pdf excel" class="r" headerClass="hr" />
<display:column title="Notes" sortable="true" property="notes" media="xml csv pdf excel" class="c" headerClass="hc"/>
<display:column property="invPoNum" title="P.O. No." sortable="true" class="l" headerClass="hl"/>
<display:column property="invRefNo" title="Ref. No." sortable="true" class="lbr" headerClass="hlbr"/>
<display:column property="status" title="Status" sortable="true" class="l" headerClass="hl"/>
</td></tr>
</display:table>
答案 0 :(得分：4)
创建CSS班级locked-column.css：
div#tbl-container {
width: 740px;
/* default value will be overrided by minimum of table width or screen
resolution*/
height: 300px;
margin-top: -11px;
overflow: auto;
/*
scrollbar-base-color: #ffeaff;
*/
}
.dataTable { /*table-layout: fixed; */
border-collapse: collapse;
/* background-color: WhiteSmoke; */
}
.dataTable th {
top: expression(document . getElementById("tbl-container") . scrollTop-2
); /* IE5+ only */
z-index: 20;
font-size: small;
padding: 5px 5px 5px 5px !important;
text-align: center;
position: relative;
cursor: default;
font-family: sans-serif;
font-size: small;
font-weight: bold;
background-color: #BBCCFF;
color: #FFFFF;
}
.dataTable thead tr {
position: relative;
height: 10px;
/*background-color: #7CA4E0;*/
}
.dataTable th a:link,th a:visited {
color: #1155cc;
font-weight: bold;
text-decoration: none;
font-family: sans-serif;
}
.dataTable a:hover {
color: #1155cc;
text-decoration: underline;
font-family: sans-serif;
font-weight: bold;
}
.dataTable thead th.sorted A {
font-weight: bolder;
}
.dataTable td {
padding: 3px 3px 3px 3px !important;
}
.dataTable tbody tr {
height: auto;
white-space: nowrap;
}
.dataTable tbody tr.odd {
background-color: #FFFFFF;
font-size: x-small;
}
.dataTable tbody tr.tableRowEven,tr.even {
background-color: #DDE5FF;
font-size: x-small;
}
.dataTable tbody tr td:last-child { /* padding-right: 20px; */
}
/*these styles have nothing to do with the locked column*/
.dataTable body {
background-color: white;
color: black;
font-family: sans-serif;
}
.dataTable tbody td {
padding: 2px 4px 2px 4px !important;
font-family: sans-serif;
font-size: x-small;
}
.exportlinks {
font-family: sans-serif;
}
/* style sheet to display light blue color for a mouse on row over event */
.dataTable tr.rowMouseOver {
color: white;
background-repeat: repeat-x;
background-color: rgb(228, 59, 47); /*#8888FF;*/
}
.dataTable .order1 {
background-position: right 50%;
background-image: url('../Images/arrow_up.gif');
background-repeat: no-repeat;
font-weight: bold;
}
.dataTable .order2 {
background-position: right 50%;
background-image: url('../Images/arrow_down.gif');
background-repeat: no-repeat;
font-weight: bold;
}
span.export {
padding: 0 4px 1px 20px;
font-size: x-small;
text-align: center;
}
span.excel {
background-image: url('../Images/ico_file_excel.png');
background-repeat: no-repeat;
width: 16px;
}
span.csv {
background-image: url('../Images/ico_file_csv.png');
background-repeat: no-repeat;
width: 16px;
}
span.xml {
background-image: url('../Images/ico_file_xml.png');
background-repeat: no-repeat;
width: 16px;
}
span.first {
background-image: url('../Images/first.jpg');
background-repeat: no-repeat;
width: 16px;
}
span.last {
background-image: url('../Images/last.jpg');
background-repeat: no-repeat;
width: 16px;
}
span.pdf {
background-image: url('../Images/ico_file_pdf.png');
background-repeat: no-repeat;
width: 16px;
}
span.rtf {
background-image: url('../Images/ico_file_rtf.png');
background-repeat: no-repeat;
width: 16px;
}
.rightAlignedPadded {
text-align: right;
padding-right: 10px;
}
在JSP的JavaScript中调用此CSS类：
if(navigator.appName == 'Microsoft Internet Explorer')
{
document.write('<link rel="stylesheet" type="text/css" href="css/locked-column.css" />');
}
else
{
document.write('<link rel="stylesheet" type="text/css" href="css/displaytag1.css" />');
}
并将您的display-tag设为：
<table>
<tr><td>
<div id="tbl-container" style="width: 850px;">
<display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" />
<display:setProperty name="export.excel.filename" value="OverallOverdue.xls" />
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="OverallOverdue.csv" />
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="OverallOverdue.xml" />
<display:setProperty name="paging.banner.placement">top</display:setProperty>
.........
</display:table></div> </td></tr>
<tr><td> </td></tr>
<tr><td>
<div id="export-links">
</div>
</td>
</tr>
</table>
答案 1 :(得分：0)
如果它包含在scrollable中，请输入：
<div id="export-links">
</div>
在<table>之外
在可滚动表中不能有不可滚动的元素。也许你可以将该元素定义为绝对位置，并使其成为那样，但我不建议这样做。
使用您的代码尝试这样：
<table>
<tr><td>
<div id="tbl-container" style="width: 850px;">
<display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" />
<display:setProperty name="export.excel.filename" value="OverallOverdue.xls" />
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="OverallOverdue.csv" />
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="OverallOverdue.xml" />
<display:setProperty name="paging.banner.placement">top</display:setProperty>
.........
</display:table></div> </td></tr>
<tr><td> </td></tr>
<tr><td>
</td>
</tr>
</table>
<div id="export-links">
your links here
</div>
这样，表格中not be included会滚动
看看我做的这个例子：
答案 2 :(得分：0)
从http://www.hesido.com/web.php?page=customscrollbar下载flexcroll.js和flexcrollstyles.css并包含这些文件。
<table>
<tr>
<td width='100%'> Paging: </td>
</tr>
<tr>
<td>
<div id='customscroll' class='flexcroll' style='height:300px;'>
<table>
<tr>
<td>Your content</td>
</tr>
</table>
</div>
</td>
</tr>
</table>