随身笔记
随身笔记

node.js分页

express分页功能,之前也写过类似的php分页功能《php简单分页

这里也做了一下node.js分页,写法都不一样,但思路基本都相同,这里总结归来一下不过运用哪里语言都通用。

效果如图:

node_page

 

教程都以上图效果为准。

1,“首页”功能简单,“上一页”功能在获取当前页码的时减去1就行,“下一页”功能在获取当前页基础上加1。

2,“尾页”,总共数据条数  除以  一页要显示的条数 就得到了一共多少页。得出的结果有余数,要向整数加1。

3,“跳转到某页”功能利用js的window.location.href功能即可。

4,页码的显示和省略号显示:

node_page0

(1)初始化状态要判断数据数否满足了5页,如果有那么就用5后面的省略号,如果正好是5页或者小于5页则没有。

(2)点击大于3的页码时才开始判断,以下的判断都要以当前的页码为基准来判断。

node_page2

当点击5时,判断什么情况下会出现左边省略号和又边省略号如: (当前页-3)>0 && 当前页+2<总页码

 

node_page3

接着判断只显示左省略号的出现,当前页+2==last_page

这时候如果点了7或者8页时就会出错, 这时候应该判断:总页码-2<当前页 && 当前页<=总页码

 

———————————————————————————————-

下面贴出基于 jade+mongodb写的分页

前台逻辑:

div#page
a(href="/") 首页
if current_page==1
a(href="/1") 上一页
else
a(href="/#{current_page-1}") 上一页
if last_page<=5
- for (var i = 1; i <= 5; i++)
        a(href="#{i}") #{i}
else
      if current_page<=3
- for (var i = 1; i <= 5; i++)
        a(href="#{i}") #{i}
span ...
if current_page>3
if (current_page-3)>0 && current_page+2<last_page
span ...
- for (var i = current_page-2; i <= current_page+2; i++)
             a(href="#{i}") #{i}
span ...
if current_page+2==last_page
span ...
- for (var i = current_page-2; i <= current_page+2; i++)
             a(href="#{i}") #{i}
if last_page-2<current_page && current_page<=last_page
span ...
- for (var i = last_page-2; i <= last_page; i++)
                 a(href="#{i}") #{i}
if current_page==last_page
a(href="/#{last_page}") 下一页
else
a(href="/#{current_page+1}") 下一页
a(href="/#{last_page}") 尾页
span #{last_page}| ----跳转到第
input(type="text" value="")#page_num
| button#up_page 确定
| <br>

 

 

跳转到某页功能:

$('#up_page').click(function () {

    if( #{last_page}<$('#page_num').val() ){
window.location.href='/'+#{last_page};
    }
    if( $('#page_num').val()<=0 )
    {
window.location.href='/1';
    }else{
      window.location.href='/'+$('#page_num').val();
    }

});

 

后台逻辑:

//首页内容
router.get('/', function(req, res, next) {


    MongoClient.connect(DB_CONN_STR, function(err1, db) {
        if(err1){
            console.log('连接数据库失败');
        }else{


            db.collection('post').find().toArray(function (err1,result1) {
                if(err1){
                    console.log('插入数据失败');
                }else{


                    if(parseFloat(req.params.page_num)<=0){
                        req.params.page_num=1;
                        var num=parseFloat(req.params.page_num);
                        console.log('执行了-------------------');
                    }

                    if(parseFloat(req.params.page_num)>=Math.ceil(((result1).length)/5)){
                        req.params.page_num=Math.ceil(((result1).length)/5);
                        var num=parseFloat(req.params.page_num);
                    }
                    else{
                        var num=parseFloat(req.params.page_num);

                    }


                        db.collection('post').find({} ,{skip:0,limit:5, sort: [['_id',1]]}).toArray(function (err2,result2) {
                            if(err2){
                                console.log('插入数据失败');
                            }else{
                                res.render('index', {
                                    title: '首页',
                                    result:result2,
                                    current_page:parseFloat(req.params.p)?parseFloat(req.params.p):1,
                                    page_total:result1.length,
                                    last_page:Math.ceil((result1.length)/5)
                                });
                            }
                        });

                }
            });

        }
    });

});








//首页内容
router.get('/:p', function(req, res, next) {
   // var num=parseFloat(req.params.p);
MongoClient.connect(DB_CONN_STR, function(err1, db) {
        if(err1){
            console.log('连接数据库失败');
        }else{


            db.collection('post').find().toArray(function (err1,result1) {
                if(err1){
                    console.log('插入数据失败');
                }else{

                            if(parseFloat(req.params.p)<=0){
                                req.params.p=1;
                                var num=parseFloat(req.params.p);
                                console.log('执行了-------------------');
                            }

                            if(parseFloat(req.params.p)>=Math.ceil(((result1).length)/5)){
                                req.params.p=Math.ceil(((result1).length)/5);
                                var num=parseFloat(req.params.p);
                            }
                            else{
                                var num=parseFloat(req.params.p);

                            }

                            db.collection('post').find({} ,{skip:(num-1)*5,limit:5, sort: [['_id',1]]}).toArray(function (err2,result) {
                                if(err2){
                                    console.log('插入数据失败');
                                }else{

                                    res.render('index', {
                                        title: '首页',
                                        result:result,
                                        current_page:parseFloat(req.params.p)?parseFloat(req.params.p):1,  //获取到当前页码
page_total:result.length,     //总条数据
last_page:Math.ceil(((result1).length)/5)
                                    });

                                }
                            });

                }
            });

        }
    });

});

 

数据库结构情况

node_page4

 

 

 

随身笔记

node.js分页
express分页功能,之前也写过类似的php分页功能《php简单分页》 这里也做了一下node.js分页,写法都不一样,但思路基本都相同,这里总结归来一下不过运用哪里语言都通用。 效果如图…
扫描二维码继续阅读
2016-10-14