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

墨韵 - 2021-10-09 00:56:08

后端数据

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 >
                <%- 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 >${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);
    }
});

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

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：手摸手教你实现移动端滚动记忆（带分页）

下一篇：文章小程序全栈开发，从入门到上线，第4节——发布文章