html中使用table建表怎么使超过的界面的部分保存在下一页里?


如果有100行数据,怎么让他只显示10行,其余的分配到下一页(10行/页)。


 <table>
<tr>
    <th>title</th>
</tr>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
...
<tr><td>row100</td></tr>
</table>

css3 web css html5 HTML

我不是葛炮 8 years, 10 months ago

1,如果这个数据都是保存在客户端的,可以采用以下方法


 var data=[...];
var pageIndex=0;

function showPageInfo(pageIndex){
    var container=document.getElementsByTagName("table")[0];
    var content="<tr><th>title</th></tr>";
    for(var i=0;i<10;i++){
        content=content+"<tr><td>"+data[10*pageIndex+i]+"</td></tr>";
    }
    container.innerHTML=content;
}

function next(){
    pageIndex=pageIndex+1;
    if(pageIndex>=10){
        pageIndex--;
        return;
    }
    showPageInfo(pageIndex++);
}

function pre(){
    pageIndex=pageIndex-1;
    if(pageIndex<0){
        pageIndex++;
        return;
    }
    showPageInfo(pageIndex--);
}

2,如果是从数据库中取出来的,可以通过在请求中传入参数的方式获取对应的10条数据,然后前端负责展示出来即可。

泰兰德的香蕉 answered 8 years, 10 months ago

你的数据已经在view层面定型了,还怎么进行分页?
如果你的数据是 JavaScript 中的数据结构,那随便搞搞就可以实现分页。
顺便说一下,你的 HTML 结构也压根不是 100 行数据,还是认真把基础打牢再来解决这种需求吧。

4572918 answered 8 years, 10 months ago

Your Answer