ejsmate分頁

ejs算是蠻多人用的一個node.js的後模板引擎
最近用它實現了分頁
模板層代碼如下

<div class="pagination">
                <ul>
                    <li>
                        <a href='/?tab=<%=tab%>&page=1'>&lt;&lt;</a>
                    </li>
                    <% if(page>3&&page>5){%>
                    <li>
                        <a>......</a>
                    </li>
                    <%}%>
                    <%
                        var i = 2;
                        if(pageCount<=5){
                            i=page-1
                        }
                        //倒數每二頁
                        if(page+1==pageCount&&page>=5){
                            i=3
                        }
                        //最後一頁
                        if(page+1>pageCount&&page>=5){
                            i=4
                        }
                        while(i>=1){%>
                            <li><a href='/?tab=<%=tab%>&page=<%=page-i%>'><%=page-i%></a></li>
                            <%
                            i--
                        }
                    %>
                    <li class='disabled active'>
                        <a href='/?tab=<%=tab%>&page=<%=page%>'><%=page%></a>
                    </li>
                    <%
                        var i = 1;
                        var num=2
                        //前二頁
                        if(page<3){
                            num=5-page
                        }
                        while(i<=num){
                            if(page+i<=pageCount){%>
                            <li><a href='/?tab=<%=tab%>&page=<%=page+i%>'><%=page+i%></a></li>
                            <%}
                            i++
                        }
                    %>
                    <% if(pageCount-(page+3)>=0&&pageCount>5){%>
                        <li>
                            <a>......</a>
                        </li>
                    <%}%>
                    <li>
                        <a href='/?tab=<%=tab%>&page=<%=pageCount%>'>&gt;&gt;</a>
                    </li>
                </ul>
            </div>

pagecount是總頁,page是當前頁碼
其實沒多難就是當前頁面加上前兩頁+後兩頁,再處理一下前兩頁,也就是1、2頁,還有最後兩頁,加上前5頁的特殊情況就行了。
controller中的核心代碼

    var ep=new eventproxy()
    ep.all('topic_data_ok','page_count_ok',(topics,pageCount)=>{
        res.render('index',{topics:topics,tab:tab,page:page,pageCount:pageCount})
    })
    var count=3
    var option={skip:(page-1)*count,limit:count,sort:'-insertTime'}
    topicModel.getTopics(query,option,(err,topics)=>{
        topics=_.map(topics,(topic)=>{
            topic.timeStr=common.formatTime(topic.insertTime)
            return topic
        })
        ep.emit('topic_data_ok',topics)

    })
    //一個mongose的集合model,默認有count方法
    topicModel.count(query,(er,allCount)=>{
        var pageCount=Math.ceil(allCount/count)
        ep.emit('page_count_ok',pageCount)
    })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章