0

I want to only display the first 6 rows of the table and when I press a button, the previous six will be hidden and the next six will be shown.

Here is my javascript that shows the first 6 tables:

function setInnerHTML(){
<%
    ArrayList userBoxList = BoxList.getInstance().getUserBoxList();

    if(userBoxList.size()>6){%>
        document.getElementById('down').disabled = false;
        document.getElementById('page').value = counter + 1;
        <% size = 6;
    }
    else{
        size = userBoxList.size();
    } 

    for(x=0; x < size; x++)
    {
        UserBox box = (UserBox) userBoxList.get(x); %>  
        document.getElementById(origID).onclick = changeColor;

        var items = document.getElementById(origID).getElementsByTagName("td");
        items[0].innerHTML = "<%=box.getInfo().getBoxNumber()%>";
        items[1].innerHTML = "<%=box.getInfo().getBoxName()%>";
        items[2].innerHTML = "<%=box.getInfo().getOwnerUserName()%>";
        items[3].innerHTML = "<%=box.getInfo().getCurrentSize()%>" + "MB"; 

        origID++;

    <%}
%>
}

My HTML code:

<tr style="height:40px;" bgcolor="#FFFFFF" id="0">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="1">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="2">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="3">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="4">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="5">
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
    <td align="left"> </td>
</tr>
4

2 回答 2

0

我通过使用动态创建表解决了这个问题

> document.getElementById.style.display = "table-row" and 
> document.getElementById.style.display = "none"

隐藏和显示 TR。

于 2013-07-12T02:28:30.120 回答
0

将逻辑与视图混合并不是一个好习惯。尝试使用已经存在的组件来显示表格。
您可以选择 displayTag：http ://www.displaytag.org/1.2/或 datatables https://datatables.net/或许多其他。
使用带有 ajax 调用的服务器端处理来显示下一条记录。

于 2013-07-09T03:10:52.940 回答