大多数时候,我们分页都在数据库中分页好,然后传到页面上,今天记录一个新的分页方式。
需求:所有数据通过webservice服务获取到,在js中对数据实现假分页。
代码如下:
function Paging(index){
debugger;
var RankInfo = document.getElementById("recode");
var totalPage = RankInfo.rows.length; //总条数
var pageSize = 10;//每页显示条数
var pageNumber = Math.ceil(totalPage/pageSize); //总页数
var currentPage = index;//当前页数
var start_row = (currentPage-1)*pageSize;//开始显示的行
var end_row = currentPage*pageSize;//结束显示的行
end_row = (end_row > totalPage) ? totalPage : end_row;
for(var i=0;i<totalPage;i++){
var irow = RankInfo.rows[i];
if(i>=start_row && i<end_row){
irow.style.display = 'table-row';
}else {
irow.style.display = 'none';
}
}
var pageHTML = '';
pageHTML += "<a class='finedo-page-canhide' href=\"javascript:Paging(1)\" title=\"首页\">首页</a>";
var up =parseInt(currentPage)-1;
if(up<1){up =1;}
pageHTML += "<a class='finedo-btn-num' href=\"javascript:Paging("+up+")\" title=\"上一页\">上一页</a>";
pageHTML+="<span>"+currentPage+"/"+pageNumber+"</span>";
var next =parseInt(currentPage)+1;
if(next >pageNumber){ next = pageNumber ;}
pageHTML += "<a class='p_next js_page' href=\"javascript:Paging("+next+")\" title=\"下一页\">下一页</a>";
pageHTML += "<a class='p_last js_page' href=\"javascript:Paging("+pageNumber+")\" title=\"末页\">末页</a>";
if(totalPage == 0){
$("#page").html('');
}else {
$("#page").html(pageHTML);
}
}
初始化方法:
$(function(){
$.ajax({
url:"${ctx }/finedo/saartifactoryidquery/idquery",
type:"POST",
dataType:'json',
data:{},
success:function(data){
result = data.resEntities.resEntity;
var html = "<tbody id='recode'> ";
for(i=0;i<result.length;i++){
html += '<tr>';
html += '<td id="">'+result[i].id+'</td>';
html += '<td id="">'+result[i].name+'</td>';
html += '<td><a href="#" onclick="toSubmit(\''+result[i].id+'\')">下载</a></td></tr>';
}
html+="</tbody>"
$("#download").append(html);
Paging(1);
}
});
})
页面:
<div id="page"></div>
当然了,页面的样式有那么点丑啦,要用的同志们需要改善一下样式。