jquery如何模拟分页-小白进阶

html容器

加载更多

js逻辑处理
var data = {
// 分页数据
docPages: {
pageNo: 1, // 当前页码
pageSize: 3 // 一页多少条数据
},
// 模拟数据
docList: [{
name: '这是我的第1篇文章'
},{
name: '这是我的第2篇文章'
},{
name: '这是我的第3篇文章'
},{
name: '这是我的第4篇文章'
},{
name: '这是我的第5篇文章'
},{
name: '这是我的第6篇文章'
},{
name: '这是我的第7篇文章'
},{
name: '这是我的第8篇文章'
}]
}
$('#docLoadMore').on('click',function(){
function getHtml(name) {
// html模板
var tpl = '

'+
''+
'<img src="../images/productDetails/yh_product_wendang_icon@2x.png" / class="word-icon">'+
''+
''+name+''+
''+
'<img src="../images/productDetails/yh_product_xiazai_icon@2x.png" / class="load-icon">'+
''+
'

';
return tpl;
}
var pageNo = data.docPages.pageNo;
var pageSize = data.docPages.pageSize;
// 计算最多分多少页
// 总条数 / 一页多少条 = 可以分多少页 如果是小数 向上取整(Math.ceil)
let maxPage = Math.ceil(data.docList.length / pageSize);
// 如果页面大于总页数return
if (pageNo > maxPage) {
console.log('没有更多了');
return;
}
// 计算第n页时取第几条到第几条数据
var startIndex = (pageNo-1) * pageSize; // 下标从0开始，所以-1
// 1:(1-1)2=>0
// 2:(2-1)2=>2
// 3:(3-1)2=>4
// 4:(4-1)2=>6
var endIndex = pageNo * pageSize - 1;
// 1: 12=>2
// 2: 22=>4
// 3: 3*2=>6
data.docPages.pageNo ++;
// 根据下标找到对应的页码的数据
var newPage = vm.data.docList.slice(startIndex, endIndex+1);
let html = '';
newPage.map(function(item){
html += getHtml(item.name);
});
// 向元素后面插入准备好的html内容
$('#docList').append(html);

})

提示
tips：上面代码没有初始化第一页数据，点击一下才会出来第一页的数据，所以可以在页面加载完毕，自动触发一下点击事件

// 页面加载完毕触发一次，作为默认值
$('#docLoadMore').trigger('click');

本文由 Web秀 作者：Javan 发表，转载请注明来源！