jquery.pagination.js安装使用
- 下载 jquery.pagination.js
- 学习网站:文档
- 百度云: 链接:https://pan.baidu/s/1sCFqeUw4WDDOIrLEYTNTLw 密码:dfdl
- HTML插入
<script src="plugins/jquery.min.js" type="text/javascript"></script>
<script src="plugins/jquery.pagination.js" type="text/javascript"></script>
- 需要一个div
第一个参数 total 必填
第二个 调用函数
$("#Pagination").pagination(total, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,
items_per_page: 4, //每页显示个数
prev_text: "前一页",
next_text: "后一页"
});
// 第一个参数 page 必填 第二个 占位 page 从0开始 所以每次+1
function pageselectCallback(page,jq){
getDate(page+1,4);
}
- 如果使用ajax获取total 则代码为( 注:使用ajax一定要填写async: false,//不是异步加载, 让ajax为同步执行 )
$(function() {
// 初始化系统数据
getDate(1,4);
var total;
$("#Pagination").pagination(total, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,
items_per_page: 4, //每页显示个数
prev_text: "前一页",
next_text: "后一页"
});
function pageselectCallback(page,jq){
getDate(page+1,4);
}
function getDate(page,rows){
$.ajax({
type: "get",
//url: "data/promotion.json"
url: "/sales/queryPromotionByPage?page="+page+"&rows="+rows,
async: false,//不是异步加载,让ajax先执行
dataType: "json",
success: function(data) {
$("#promotionresult").empty();
total = data.totalCount;
$.each(data.pageData, function(i, item) {
var str = '<div class="result col-md-3">';
//拼接对象展示
str += '<div class="thumbnail"></div>';
});
}
});
}
});
- 效果
祝你幸福
送你一首歌:张三的歌 蔡琴
附图:江苏宿迁三台山衲田花海
更多推荐
jquery分页插件jquery.pagination.js使用方法百度云下载
发布评论