您的位置:首页 > Web前端 > BootStrap

jquery 结合bootstrap样式的前端分页

2016-08-22 22:20 344 查看
直接秀代码

var pagination = {
nowPage : 1,
pageNum : 15,
maxPage: undefined,
search:function(){
var result = search(this.getStartNum(),this.pageNum,searchParams)
if(result != undefined || result != null){
this.maxPage = this.getMaxPage(result)
}
this.createPage()
},
previousPage:function(){
if(this.nowPage>1) this.nowPage--
},
nextPage:function () {
if (this.nowPage<this.maxPage) this.nowPage++
},
skip:function(skipNum){
this.nowPage = skipNum
this.search()
},
createPage:function(){
var html=''
var prefix = '<li><a href="#" onclick="pagination.skip(1)">«</a></li>'
var last = '<li><a href="#" onclick="pagination.skip('+this.maxPage+')">»</a></li>'
html += prefix
if (this.maxPage <= 11){
for(var i = 1 ; i <= this.maxPage ; i++){
var clickPage = i==this.nowPage?'  class="active"' : ' '
html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>'
}
}else{
if (this.nowPage <= 5){
for(var i = 1 ; i <= 11 ; i++){
var clickPage = i==this.nowPage?'  class="active"' : ' '
html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>'
}
}else if(this.nowPage >= this.maxPage - 5){
for(var i = this.maxPage-11 ; i <= this.maxPage ; i++){
var clickPage = i==this.nowPage?'  class="active"' : ' '
html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>'
}
}else{
for(var i = this.nowPage-5 ; i <= this.nowPage+5 ; i++){
var clickPage = i==this.nowPage?'  class="active"' : ' '
html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>'
}
}
}

html += last
$('.pagination').html(html)

},
getStartNum:function(){
return (this.nowPage-1)*this.pageNum
},
getEndNum:function(){
return this.nowPage*this.pageNum
},
getMaxPage:function(total){
return Math.ceil(total/this.pageNum)

}
}


/**
* 搜索
* @param params 上传参数
*/
var search = function (start,end,params) {
var result
$.ajax({
url:'/dola/admin/userlist/'+start+'/'+end ,
type:'get',
dataType:'json',
data:params,
async:false,
success:function(data){
if(data.success){
result = parseInt(data.message)
tableData=data.data;
load(tableData)
}
}
});
return result
}


初始化时调用getMaxPage(total)获取共有多少页,然后修改search函数创建你自己的table
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  pagination javascript