ejs 接收后端数据实现本地分页

后端数据

var arr=[];
for(let i=0;i<77;i++){
    arr.push({
        index:i+1,
        head: '

ccccccccc

', content: '
qqqqqqqq,qqqqqqqqqvvvvvvvv

cccccc,,cccccc

' }) } router.get('/', function(req, res, next) { res.render('index', { news: JSON.stringify(arr),//关键是转换字符串 }); });

前台HTMl

<% var newslist=JSON.parse(news);newslist.forEach(function(item,key){%> <%if(key<=9){%>
<%- item.index%> <%-item.head%> <%- item.content%>
<%}%> <%})%>

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(`
${element.index} ${element.head} ${element.content}
`) }); $('#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); } });

例子中用了一个分页插件,可以自行寻找类似的,很多,实在找不到留个爪

你可能感兴趣的:(ejs 接收后端数据实现本地分页)