初学前端

node.js分页

2019-11-13  本文已影响0人  焚心123

 ejs页面中的代码


       data是主页渲染,查找返回的数据


    <p class="pp">

<%a=1%> //声明变量var  a = 1;

<%for(var i=0;i   //循环

<%if(i%5==0)%> //判断,如果要每页的数据显示为五条,就%5

<%=a%> //在span里输入变量a的值

<%a++%> //数据超过五条就+1

                       <%}%>

                <%}%>

       </p>


 js:用绑定事件,也可以用委托事件


$(".pp>span").on("click",function () {

  $(this).css({background:"green",width:"40px",height:"40px",

    display:"inline-block",textAlign:"center",lineHeight:"40px",

    fontSize:"20px"}).siblings().css({background:"#ccc"})

  var a=$(this).index();

  $.ajax({

    url:"/pag",

    data:{

      index:a

    },

    success:function (ret) {

      if (ret.code==0){

        var da=ret.data;

        var str="";

        for(var i in da){

          str+=` <tr>

          <td>${da[i].id}</td>

          <td>${da[i].name}</td>

          <td>${da[i].age}</td>

          <td>${da[i].tel}</td>

          <td>

            <button v="${da[i]._id}" type="button" class=" del btn btn-warning">删除</button>

            <button type="button" class="edit btn btn-danger" data-toggle="modal" data-target="#myModal">编辑</button>

          </td>

        </tr>`

        }

        $("tbody").html(str);

      }

    },error:function (msg) {

      console.log(msg)

    }

  })

})


routes:


//8. 分页


    router.get("/pag",function(req,res,next){

           var da=req.query;  //获取前台请求数据

           mm.find(function(err,data){

             if(!err){

                  res.send({

                       code:0,

                       data:data,

                        message:"分页数据查找成功"

           }   )

                }

               }).limit(5).skip(Number(da.index)*5)    //每页五条数据显示

     })

样式:


$(".pp>span").css({background:"green",width:"40px",height:"40px",

  display:"inline-block",textAlign:"center",lineHeight:"40px",

  fontSize:"20px"}).next().css({background:"#ccc"})

上一篇 下一篇

猜你喜欢

热点阅读