css - html中使用table建表怎么使超过的界面的部分保存在下一页里?-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

PHP中文网 2017-04-17 11:54:03

[HTML讨论组]

541

如果有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>

PHP中文网

认证高级PHP讲师

全部回复(2)

ringa_lee2017-04-17 11:56:03 2楼

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

赞 +0

添加回复

巴扎黑2017-04-17 11:56:03 1楼

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条数据，然后前端负责展示出来即可。

赞 +0

添加回复