- 一个分页的逻辑业务。
//把我们拿到的数据组织好,发送ajax拿到符合用户选项的商品列表
ajax_list(data);
function ajax_list(data,page_n){
$.ajax({
async: false, //表示请求是否异步处理
//请求方式
type: "get",
//请求的媒体类型
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
//请求地址
url: http + "/api/page/goods/getProducts.do",
//数据,json字符串
dataType: "json",
timeout: 5000,
headers: {
token: token,
},
data:data,
success:function(result){
console.log(result);
console.log(result.data)
//拿到符合我们用户选项的商品数据后,渲染数据和分页数据
var body_data = {
body_data: result.data
}
var html_body = template('real_body_', body_data);
document.getElementById('real_body').innerHTML = html_body;
//渲染我们的分页数据
var page = Math.ceil(result.count/10);
if(!page_n){
$('#pagination').empty();
new pagination({
pagination: $('#pagination'),
maxPage: 5, //最大页码数,支持奇数,左右对称
startPage: 1, //默认第一页
currentPage: 1, //当前页码
totalItemCount: page, //项目总数,大于0,显示页码总数
totalPageCount: page, //总页数
callback: function (page) {
console.log(page)
console.log(data);
data.page = page;
var page_n = 1;
ajax_list(data,page_n);
}
});
}
},
erorr:function(e){
console.log(e);
}
})
}
- 备注: 这里的page_n 是解决问题的关键,虽然我们引用的分页插件,由于每次ajax后,都会重新创建一个分页插件,不符合分页业务需要,于是我们传入page_n的值来判断是否是分页插件里加载的,如果是就传入分页参数加载数据。如果不是就不传入分页参数加载数据。