html用js给文字自动分页,用JS实现前端分页的简单方法 --分页1

昨天朋友问我，后台传过来的数据在前端分页显示怎么做。

我也只做过后台分页查询前端显示的方法，没有做过后台不分页而在前端分页的形式。

于是研究了下后台返回全部数据，在前端将数据分页显示的办法。自己研究再参考网上的办法，

分页

.table{border:solid #FFAEB9; border-width:1px 0px 0px 1px;width: 100%;font-size: 12px;line-height: 21px;text-align:center;}

.table thead td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;}

.table tbody td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;padding-right: 5px;padding-left: 5px;}

//编造表数据

//表头

var head=

''+

'

姓 名 '+

'

年 龄 '+

'

彦 值* '+

'

成 绩 '+

'

身 高cm '+

'

';

//表内容，后台返回的内容可以封装到这里，随时取用，但是如果数据量很大估计会相当耗资源。

var pageData=[];

for(var i=1;i<100;i++){

var data='

'+

'

学生'+i+''+

'

'+Math.round(Math.random()*20)+''+

'

'+Math.round(Math.random()*5)+'颗星'+

'

'+Math.round(Math.random()*100)+''+

'

'+Math.round(Math.random()*200)+'cm'+

'

';

pageData.push(data);

}

//表结尾

var end='

';

$(function(){

var Count = pageData.length;//记录条数

var PageSize=10;//设置每页示数目

var PageCount=Math.ceil(Count/PageSize);//计算总页数

var currentPage =1;//当前页，默认为1。

//造个简单的分页按钮

for(var i=1;i<=PageCount;i++){

var pageN='第'+i+'页';

$('#page').append(pageN);

}

//显示默认页(第一页)

$('#table').empty().append(head);

for(i=(currentPage-1)*PageSize;i

$('#table').append(pageData[i]);

}

$('#table').append(end);

//显示选择页的内容

$('a').click(function(){

var selectPage=$(this).attr('selectPage');

$('#table').html('');

$('#table').append(head);

for(i=(selectPage-1)*PageSize;i

$('#table').append(pageData[i]);

}

$('#table').append(end);

});

});