当前位置: 首页 > 工具软件 > Express Combo > 使用案例 >

express分页实现

刘翔宇
2023-12-01

前端代码

element-ui分页里面直接复制就好

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 3, 5, 7]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  data() {
    return {
      total: 0,
      pagenum: 2,
      pagesize: 1,
    }
   }
    handleSizeChange(val) {
      this.pagenum = val;
      this.showCom();
    //调用方法,实现数据刷新
    },
    handleCurrentChange(val) {
      this.pagesize = val;
      this.showCom();
    //调用方法,实现数据刷新
    },

上面直接复制即可,下面是从后端请求过来的数据,把pagenum和pagesize传过去

    async showCom() {
      var r = await this.http.get("http://127.0.0.1:3000/combo/showCombo",
        {
          params: {
            pagenum: this.pagenum,
            pagesize: this.pagesize,
          },
        });
      console.log(r);
      if (r.data.code == 200) {
        this.tableData = r.data.data;
        this.total = r.data.count;
      }
    },

 

后端代码

router.get("/showCombo", async function (req, res) {
  var limit = req.query.pagenum;
  var page = req.query.pagesize;
  var sk = (page - 1) * limit;
  var count = await com.count();
  var r = await com.find().skip(sk).limit(limit);
  res.json({ code: 200, data: r, count });
});

 类似资料: