后端数据
var arr=[];
for(let i=0;i<77;i++){
arr.push({
index:i+1,
head: '<h3>ccccccccc</h3>',
content: '<div>qqqqqqqq,qqqqqqqqqvvvvvvvv<p>cccccc,,cccccc</p></div>'
})
}
router.get('/', function(req, res, next) {
res.render('index', {news: JSON.stringify(arr),// 要害是转换字符串
});
});
前台 HTMl
<div id="content">
<% var newslist=JSON.parse(news);newslist.forEach(function(item,key){%>
<%if(key<=9){%>
<div style="margin-bottom: 10px;">
<%- item.index%>
<%-item.head%>
<%- item.content%>
</div>
<%}%>
<%})%>
</div>
<div id="pages"></div>
js 局部
var newslist = JSON.parse('<%-news%>');
function getList(index){var reslut= newslist.slice((index-1)*10,index*10);
$('#content').empty();
var dof=document.createDocumentFragment();
reslut.forEach(element => {$(dof).append(`<div style="margin-bottom:10px">${element.index} ${element.head} ${element.content}</div>`)
});
$('#content').append($(dof))
};
new Pagination({
element: '#pages', // 元素
type: 2, // 款式类型,可选 [1,2]
pageIndex: 1, // 初始页码
pageSize: 10, // 每页数量
pageCount: 9, // 页码数量
total: newslist.length, // 数据总条数
jumper: false, // 显示输入框跳转
singlePageHide: true, // 只有一页时不显示分页
prevText: 'prev', // 上一页文字
nextText: 'next', // 下一页文字
disabled: true, // 是否显示禁用
currentChange: function (index) {
// 页码扭转时回调
getList(index);
}
});
例子中用了一个分页插件,能够自行寻找相似的,很多,切实找不到留个爪