急问! 如何控制表格在页面部分隐藏或显示??

是这样; 现在有一个表格, 可能有100行; 页面上面有5个按纽, 按第一个按纽, 表格的前20行显示, 其他行隐藏; 按第二个按钮, 表格的21~40行显示, 其他行隐藏; 后面依此类推... 另外表格是ECTabel. 其实这个东西就是一个填表的功能; 表格的行数太多, 所以要分开显示; 可能前20行是某一类内容的集合, 后20行又是另外一类内容的集合, 用按纽控制要显示哪些行. 这个东西弄了很长时间, 都不成功... 特来求教, 希望大家能帮帮忙, 谢谢了!!

解决方案 »

  1.   

    其实说怎么分页就可了
    1.如何学了hibernate的话，直接调用hibernate的分页方法就可以了。
    2.采用sql分页
       根据不同的数据库，有不同的分页方法，我就不举例了，你到网上去查找下。
    3.比较原始的分页方法，但也挺靠的住的方法
                    int num = list.size();// 总记录
    int pagecount = 1;// 页码（1，2，3....）
                    int count=20;//每页显示的条数
    if (num % count == 0) {
    pagecount = num / count;
    } else {
    pagecount = num / count + 1;
    }
      

  2.   

    嗯... 谢谢楼上的各位同学... 但是... 没太明白; 好像无论是Hibernate的分页还是各种数据库的分页都是显示数据用的吧? 而且关键是这样的分页是不是每页的数据量都是一定的呢? 现在我只是想把一个ECTabel分成几页表示 (ECTable里有的行是要显示传过来的List里的数据, 有些行是空的, 供用户填写数据), 但每页的要显示行数不是一样的... 我是想能不能用JavaScript来控制哪些行显示哪些行不显示, 比如一个表有1行表头, 5行数据, 点击按钮1显示前2行数据, 点击按钮2显示后3行数据... 这个和数据库或Hibernate分页确实可以联系上么? 或者麻烦能否给出一个完整的Hibernate或者数据库分页的代码? 谢谢了!!
      

  3.   

    跟那种选项卡的功能类似，你先弄5个层，吧数据都填进去，然后用js控制下显示或者不显示分页是对于同一查询，你这个，明显是不同的查询，分页实现不了另外给你一个js的分页，你可以用里面的东西，来显示不同的内容，不牵扯到数据库，用的dom
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>表格分页显示</title></head><body>
    <div id="divTable">
    <table  border="1" cellpadding="0" cellspacing="0" id="tab1">
    <tbody><tr>
    <td width="73">&nbsp;序号</td>
    <td width="223">&nbsp;标题</td>
    <td width=80>&nbsp;作者</td>
    <td width=100>&nbsp;发表时间</td></tr><tr height="20">
    <td width="73">00</td>
    <td width="223" align="left"><a href="###">00</a></td>
    <td width=80>00</td>
    <td width=100>00</td></tr><tr  height="20">
    <td width="73">11</td>
    <td width="223" align="left"><a href="###">11</a></td>
    <td width=80>11</td>
    <td width=100>11</td></tr><tr  height="20">
    <td width="73">22</td>
    <td width="223" align="left"><a href="###">22</a></td>
    <td width=80>22</td>
    <td width=100>22</td></tr><tr  height="20">
    <td width="73">33</td>
    <td width="223" align="left"><a href="###">33</a></td>
    <td width=80>33</td>
    <td width=100>33</td></tr><tr  height="20">
    <td width="73">44</td>
    <td width="223" align="left"><a href="###">44</a></td>
    <td width=80>44</td>
    <td width=100>44</td></tr><tr  height="20">
    <td width="73">55</td>
    <td width="223" align="left"><a href="###">55</a></td>
    <td width=80>55</td>
    <td width=100>55</td></tr><tr  height="20">
    <td width="73">66</td>
    <td width="223" align="left"><a href="###">66</a></td>
    <td width=80>66</td>
    <td width=100>66</td></tr><tr  height="20">
    <td width="73">77</td>
    <td width="223" align="left"><a href="###">77</a></td>
    <td width=80>77</td>
    <td width=100>77</td></tr><tr  height="20">
    <td width="73">88</td>
    <td width="223" align="left"><a href="###">88</a></td>
    <td width=80>88</td>
    <td width=100>88</td></tr><tr  height="20">
    <td width="73">99</td>
    <td width="223" align="left"><a href="###">99</a></td>
    <td width=80>99</td>
    <td width=100>99</td></tr>
    </table>
    </div>
    <br>
    <input id="first" type=button value="第一页" onclick="firstOrLast(0)">
    <input id="back" type=button value="上一页" onclick="N(-1)">
    <input id="next" type=button value="下一页" onclick="N(1)">
    <input id="last" type=button value="最后一页" onclick="firstOrLast(1)">
    <script language="javascript">
    <!--
    var pageSize=4,currentPageNum=1,totlePageNum
    var obj,totleRows,totleCols
    var rowHeigth = 20;
    var obj=document.getElementById('tab1').rows;
    onload=function(){
        
        totleRows=obj.length;
        totleCols=document.getElementById('tab1').rows(0).cells.length; 
        totlePageNum=Math.ceil((totleRows-1)/pageSize)
        //如果某一页行数小于pageSize，则增加空行
        if(totleRows==0 || (totleRows-1)%pageSize != 0){
            var tempCols
            if(totleRows==0)
                tempCols = totleCols;
            else tempCols = pageSize-(totleRows-1)%pageSize;
            for(i=0;i<tempCols;i++){
                var newBlankRow = document.getElementById('tab1').insertRow();
                var point = newBlankRow.rowIndex;
                for (m=0; m < totleCols; m++) {
                    obj[point].insertCell();
                    obj[point].cells(m).innerHTML = "&nbsp";
                }
            }
        totleRows = document.getElementById('tab1').rows.length;
        }    N(0)
    }
    function resetStyle(){
        for (var i=1;i<totleRows;i++)obj[i].style.display="none"
    }
    function N(k){
        if (k>0 && currentPageNum>=totlePageNum ||k<0 && currentPageNum<=1)return;
        currentPageNum+=k;
        resetStyle();
        toPage(currentPageNum);
        filter(currentPageNum);
    }
    function firstOrLast(flag){
        if(flag==0)
            currentPageNum = 1;
        else if(flag==1)
            currentPageNum = totlePageNum;
        else
            return ;
        resetStyle();
        toPage(currentPageNum);
        filter(currentPageNum);}
    function toPage(currentPageNum){
         for (var i=(currentPageNum-1)*pageSize+1;i<=currentPageNum*pageSize;i++)
            obj[i].style.display="";
    }function filter(currentPageNum){
            //如果是第一页，则“上一页”不可用
        if(currentPageNum-1<1) {
            document.getElementById("back").disabled=true;
            document.getElementById("first").disabled=true;
        }
        else{
            document.getElementById("back").disabled=false;
            document.getElementById("first").disabled=false;
        }
        //如果是最后一页，则"下一页"不可用
        if(currentPageNum+1>totlePageNum ) {
            document.getElementById("next").disabled=true;
            document.getElementById("last").disabled=true;
        }
        else{
            document.getElementById("next").disabled=false;
            document.getElementById("last").disabled=false;
        }
    }
    //-->
    </script></body></html>
      

  4.   

    把一百条数据分五个list放到jsp里面，用div控制五个list，点按钮的时候用js控制div的 style="display:none"
      

  5.   

    谢谢各位楼上的同学的回复... 虽然和实际应用好像还有点儿差距但是... 也学到了其他的东西. 现在用的是这样的方法: 定义多张表格, 当然了都是ECTable; 每个ECTable都写在一个Div里, 用JavaScript控制其显示和隐藏; 每个ECTable都有和它自身对应的Action, 用于查找需要的数据然后显示. 大家看看这样是否合理呢? 谢谢.