1、引入jQuery和jQuery.pagination.js文件
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
2、自定义分页插件
$(function(){
$('#pagination').pagination({
pageCount:40,
jump:true,
coping:false,
count:2,
prevContent:'<上一页',
nextContent:'下一页>',
jumpBtn:'确定',
callback:callbackAjax
});
})注意：
自定义参数详情参考点击
3、自定义数据绑定模板
$(function(){
var callbackAjax = function(api){
//获取当前页码
var current = api.getCurrent();
//请求当前页要展示的数据
var uel = xxx;//请求数据的地址
$.post(url,{
currentParam ： current
},function(data){
//将数据和HTML拼接并添加到页面渲染
//我采用js模板引擎 artTemplate进行数据绑定
$('#goods_list').html(template('goods_list_temp',data));
},'json');
}
//执行callbackAjax
$('#pagination').pagination({
pageCount:40,
jump:true,
coping:false,
count:2,
prevContent:'<上一页',
nextContent:'下一页>',
jumpBtn:'确定',
callback:callbackAjax
});
})
注意：
pagination详细参数、
template使用方法
获取当前页面的页码getCurrent()、获取总页数getPageCount()等方法，必须在回调函数中调用执行！
4、css样式
#pagination{
background: #e3e3e3;
height: 40px;
line-height: 40px;
width: 990px;
margin-top: 20px;
text-align: right;
}
#pagination .active{
color: #c41929;
border: 1px solid transparent;
background: #e3e3e3;
font-size: 14px;
padding: 3px 4px;
margin-right: 10px;
}
#pagination a,#pagination span{
border: 1px solid #cdcdcd;
background: #fff;
font-size: 14px;
padding: 3px 4px;
color: #000;
margin-right: 10px;
}
#pagination a.jump-btn{
margin-right: 20px;
margin-left: 20px;
}
#pagination input{
height: 18px;
line-height:18px;
width: 30px;
}
5、HTML
<div id="pagination">
</div>
6、最终结果
api接口
| 方法 | 参数 | 说明 |
| getPageCount() | 无 | 获取总页数 |
| setPageCount(page) | page：页数 | 设置总页数 |
| getCurrent() | 无 | 获取当前页 |
| filling() | 无 | 填充数据，参数为页数 |