JavaScript自定义分页样式
前端之家收集整理的这篇文章主要介绍了
JavaScript自定义分页样式，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
自定义分页样式，不多废话，直接上代码~
html部分
名称数量
js部分
分页
方法调用
myPagination(my_id,inner,10);
}
/*
- 分页
- a传入的是id
- inner传入的是列表内容
- PageSize每页显示的数目
*/
function myPagination(a,PageSize){
var pageNum = '<div class="pagination col-xs-12">'
+'<div class="setpage">'
+'第<input type="text" class="currentpage" class="form-control">页'
+'共<font class="totalpage">页'
+'每页有<font class="pagesize">条消息'
+'当前为第<font class="current_1">-<font class="current_2">条消息'
+'
'
+'
';
$(a).append(pageNum);
$(a).find(".pagination").css({
"height": "100%","width": "58%","float": "left","padding": "3px 10px","background-color": "#fff","margin": "0"
});
$(a).find(".setpage").css({
"height": "100%","width": "100%","line-height": "30px","margin": "0 auto"
});
$(a).find(".setpage span").css({
"float": "left","padding": "0 5px"
});
$(a).find(".setpage font").css({
"color": "#DD4449","padding": "0 5px"
});
$(a).find(".setpage input").css({
"width": "50px","border-radius":"5px"
});
//
分页
var Count = inner.length;//记录条数
var PageSize=PageSize;//设置每页示数目
var PageCount=Math.ceil(Count/PageSize);//计算总页数
var currentPage =1;//当前页，默认为1。
$(a).find(".pagesize").html(PageSize);//显示每页示数目
$(a).find(".setpage .current_1").html("1");//默认当前条数1
$(a).find(".setpage .current_2").html(PageSize);//默认当前条数2
//设置输入页面框的范围,并设置初始值
$(a).find(".currentpage").val(currentPage)
//显示默认页（第一页）
for(i=(currentPage-1)PageSize;i<PageSizecurrentPage;i++){
$(a).find("tbody").append(inner[i]);
}
$(a).find(".totalpage").html(PageCount);//总页数
//显示输入页的内容
$(a).find(".currentpage").change(function(){
if($(this).val()<1||$(this).val()>PageCount){
$(a).find("tbody").html('<tr><td colspan="3">没有更多的消息......</td></tr>');
}else{
var currentpage = $(this).val();
$(a).find("tbody").html('');
for(i=(currentpage-1)PageSize;i<PageSizecurrentpage;i++){
$(a).find("tbody").append(inner[i]);
$(a).find(".setpage .current_1").html((currentpage-1)PageSize+1);
if(PageSizecurrentpage<Count){
$(a).find(".setpage .current_2").html(PageSize*currentpage);
}else{
$(a).find(".setpage .current_2").html(Count);
}
}
}
});
}
