node.js +layui 前后端分离实现分页查询。

最新推荐文章于 2023-01-25 21:28:20 发布

代码小戳

最新推荐文章于 2023-01-25 21:28:20 发布

阅读量1.0k

点赞数 2

分类专栏：前端文章标签： javascript html node.js 前端后端

本文链接：https://blog.csdn.net/qq_41856825/article/details/108165003

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

记录一下最近写的代码从中抠出分页的部分。

html页

使用table模块时当page 模块开启时，访问接口（url）时,会自动添加 page(页码) 和 limit（分页大小）属性，不必手动发送
如果要传递参数的话写到 where：属性里
更多属性请看官方文档：luyui 数据表格文档

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<style>
  body {
    margin: 10px;
  }
</style>
<body>
  <table id="demo" class="layui-hide" lay-filter="test"></table>
  <script src="../../static/layui/layui.js"></script>
  <script type="text/html" id="barDemo">
  <!--  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">恢复</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <script>
    layui.use(['table', 'form', 'layer', 'jquery', "element", "laytpl", "laypage"], function () {
      var table = layui.table;
      var layer = parent.layer === undefined ? layui.layer : parent.layer;
      var form = layui.form;
      var $ = layui.jquery;
      var element = layui.element;
      var laytpl = layui.laytpl;
      var laypage = layui.laypage
      //第一个实例
      var bloglist = function () {
        table.render({
          elem: '#demo'
          , url: 'http://localhost:3000/article/linkage' //数据接口  获取数据
          , method: 'post'
          , contentType: 'application/json'
          , where: {}
          , page: {limits:[5,10,15]}//开启分页
          , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板
          // , totalRow: true //开启合计行
          , cols: [[ //表头
            { type: 'checkbox', fixed: 'left' }
            , { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'title', title: '博客标题' }
            , { field: 'pub_date', title: '载入时间', width: 250, sort: true }
            , { field: 'authour_id', title: '作者账户' }
            , { field: 'cate_id', title: '所属类别' }
            , { field: 'state', title: '发布状态' }
            , {
              field: 'is_delete', title: '状态', templet: function (d) {
                return d.is_delete * 1 ? "已删除" : "未删除";
              }
            }
            , { fixed: 'right', width: 195, align: 'center', toolbar: '#barDemo' }
          ]]
          , skin: 'row', even: true
        });
      }
    bloglist();
    //监听Tab切换
    element.on('tab(demo)', function (data) {
      layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
        tips: 1
      });
    });
    
    //监听头工具栏事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id)
        , data = checkStatus.data; //获取选中的数据
      switch (obj.event) {
        case 'add':
          layer.msg('添加');
          break;
        case 'update':
          if (data.length === 0) {
            layer.msg('请选择一行');
          } else if (data.length > 1) {
            layer.msg('只能同时编辑一个');
          } else {
            layer.alert('编辑 [id]：' + checkStatus.data[0].id);
          }
          break;
        case 'delete':
          if (data.length === 0) {
            layer.msg('请选择一行');
          } else {
            layer.msg('删除');
          }
          break;
      };
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
        , layEvent = obj.event; //获得 lay-event 对应的值 
      var title = obj.data.title;
      if (layEvent === 'detail') {
      //查看逻辑
      } else if (layEvent === 'del') {
        //删除数据 逻辑
      } else if (layEvent === 'edit') {
        //恢复数据 
      }
    });
  </script>
</body>
</html>

服务端就处理数据

注意两点

SELECT SQL_CALC_FOUND_ROWS * from article limit ?,? SELECT
FOUND_ROWS() as counts 此时，在执行第一条语句时就会缓存总记录数，并在FOUND_ROWS()后返回。
layui有返回数据格式要求{ code: “0”, msg: “”,data: result ,count :total[0].counts}

exports.linkage = (req, res) => {
    var pagesize = req.body.limit;
    var page = req.body.page||1;
    var m = (page - 1) * pagesize
    var n = pagesize;
    var sql = "SELECT SQL_CALC_FOUND_ROWS * from article limit ?,? "
    var sqlParams = [m,n];
    db.query(sql, sqlParams, function (err, result) {
        if (err) throw err;
        var sql1 = "SELECT FOUND_ROWS() as counts" //查询总数
        db.query(sql1,function(err, total) {
            if (err) throw err;
            console.log(total);
            res.json({ code: "0", msg: "",data: result ,count :total[0].counts});  //
        });    
    });
}

数据库

在这里插入图片描述

代码小戳

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
node.js +layui 前后端分离实现分页查询。

记录一下最近写的代码从中抠出分页的部分。html页**使用table模块时当page 模块开启时，访问接口（url）时,会自动添加 page(页码) 和 limit（分页大小）属性，不必手动发送 **如果要传递参数的话写到 where：属性里更多属性请看官方文档：luyui 数据表格文档<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫