首先引入jQuery和jqPaginator js文件
html
<div class="demo">
<div id="demo1-text"></div>
<ul id="demo1" class="pagination"></ul>
</div>
js
var detail='';//定义空的进行接收
$.ajax({
type:'post',
url:'http://192.168.1.107:81/taiyangtianyou/?s=index/example/queryByPage&page=1&count=10',
async:true,
success:function(res){
$("#demo1").jqPaginator({
totalCounts:res.data.total,//设置分页的总条目数
visiblePages: 2,//设置最多显示的页码数注意:要么设置totalPages,要么设置totalCounts + pageSize,否则报错;设置了totalCounts和pageSize后,会自动计算出totalPages。
currentPage: 1,//当前页
first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
last: '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
onPageChange: function (n) {
detail=''//点击时清空上一次的记录
$.ajax({
type:'post',
url:'http://192.168.1.107:81/taiyangtianyou/?s=index/example/queryByPage',
data:{
page:n,
count:10
},
async:true,
success:function(res){
console.log(res)
res.data.data.forEach(function(val){
console.log(val);
detail+=`
<div class="s1">
<a href="projectsdetail.html?id=${val.id}" title="${val.title}">
<img src="${val.image}" width="230" height="216" alt="${val.title}">
</a>
<span>
<a href="projectsdetail.html?id=${val.id}" title="${val.title}">${val.title}</a>
</span>
</div>
`
$("#demo1-text").html(detail);
})
}
})
}
});
}
})
参数
参数 | 默认值 | 说明 |
---|---|---|
totalPages | 0 | 设置分页的总页数 |
totalCounts | 0 | 设置分页的总条目数 |
pageSize | 0 | 设置每一页的条目数 注意:要么设置totalPages,要么设置totalCounts + pageSize,否则报错;设置了totalCounts和pageSize后,会自动计算出totalPages。 |
currentPage | 1 | 设置当前的页码 |
visiblePages | 7 | 设置最多显示的页码数(例如有100也,当前第1页,则显示1 - 7页) |
disableClass | 'disabled' | 设置首页,上一页,下一页,末页的“禁用状态”样式 |
activeClass | 'active' | 设置当前页码样式 |
first | bootstrap风格 | 设置“首页”的Html结构 |
prev | bootstrap风格 | 设置“上一页”的Html结构 |
next | bootstrap风格 | 设置“下一页”的Html结构 |
last | bootstrap风格 | 设置“末页”的Html结构 |
page | bootstrap风格 | 设置页码的Html结构,其中可以使用{{page}}代表当前页,{{totalPages}}代表总页数,{{totalCounts}}代表总条目数(例如:上面的“极简风格”的Demo,就是使用了{{占位符}},并将visiblePages设为1实现的。) 注意:first、prev、next、last。page只要设置一个,其余未设置的会变为空。 |
wrapper | (无) | 分页结构的Html包裹,例如:<div class="your class"></div>,一般不会用到 |
onPageChange | (无) | 回调函数,当换页时触发(包括初始化第一页的时候),会传入两个参数: 1、“目标页"的页码,Number类型 2、触发类型,可能的值:“init”(初始化),“change”(点击分页) |
扩展方法
jqPaginator提供了两个扩展方法,方便初始化后对组件进行操作。
$('#id').jqPaginator('option', options)
初始化后,动态修改配置
$('#id').jqPaginator('option', {
currentPage: 1
});
$('#id').jqPaginator('destroy')
销毁jqPaginator
$('#id').jqPaginator('destroy');