关于LayUIAdminPro使用table.render分页时,另外调用接口查询数据的数量的方法(LayUI踩坑篇四)

文中的LayUIAdminPro版本为v2020.4.1。使用的软件是IDEA,你问我为什么不用vsCode?为了偷懒,就使用IDEA。

书接上篇,如果我们的项目中,查询数量需要另外调用的接口时,例如,我们项目中使用到find来查询数据,count方法来查询数量。那么,我们需要在table.render中再而外的发起一次请求来查询数量的总数。

下面是单独的查询数据。

    table.render({
        elem: '#LAY-stream-user-manage',
        url: 'http://localhost:8001/api/user/find',
        method: "post",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        where: {},
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'User_id', templet: '#LAY-user-id'},
            {field: 'nickname', title: 'User_name'},
            {field: 'email', title: 'User_email'},
            {field: 'loginTime', title: 'User_last_login_at', sort: true},
            {field: 'enabled', title: 'User_status', templet: '#LAY-user-status'},
            {title: 'Action', align: 'center', fixed: 'right', toolbar: '#table-content-list'}
        ]],
        autoSort: false,
        skin: "line",
        page: {limit: 10, sort: 'id', desc: false, curr: 1, groups: 3},
        limit: 10,
        limits: [10, 15, 20, 25, 30],
        text: {none: '查无数据'},
		parseData: function (res) { //res 即为原始返回的数据
		    // 解析响应结果
		    return {
		        "code": 0 //解析接口状态
		    }
		}        
    });

在parseData中,发起查询数量的请求。

    table.render({
        elem: '#LAY-stream-user-manage',
        url: 'http://localhost:8001/api/user/find',
        method: "post",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        where: {},
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'User_id', templet: '#LAY-user-id'},
            {field: 'nickname', title: 'User_name'},
            {field: 'email', title: 'User_email'},
            {field: 'loginTime', title: 'User_last_login_at', sort: true},
            {field: 'enabled', title: 'User_status', templet: '#LAY-user-status'},
            {title: 'Action', align: 'center', fixed: 'right', toolbar: '#table-content-list'}
        ]],
        autoSort: false,
        skin: "line",
        page: {limit: 10, sort: 'id', desc: false, curr: 1, groups: 3},
        limit: 10,
        limits: [10, 15, 20, 25, 30],
        text: {none: '查无数据'},
		parseData: function (res) { //res 即为原始返回的数据
		    // 发送请求,得到总数
		    let total = 0;
		    admin.req({
		        contentType: "application/json;charset=utf-8",
		        dataType: "json",
		        method: "post",
		        async: false,
		        url: 'http://localhost:8001/api/user/count',
		        data: JSON.stringify({
					'type': 'user'	// 这里携带的参数需要和table.render中where的参数一致
				}),
		        success: function (res) {
		            if (res.code == 200) {
		                total = res.data;
		            }
		        }
		    });
		    // 解析响应结果
		    return {
		        "code": 0, //解析接口状态
		        "msg": "", //解析提示文本
		        "count": total, //解析数据长度
		        "data": res.data //解析数据列表
		    }
		}        
    });

从控制台可以看到,我们发起了两次请求,一次查数据,一次查总数。
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 中,使用 table.render 方法渲染表格后,可以通过 page 参数来开启分页功能。同,还需要通过 url 参数来设置数据接口的 URL,以便进行翻页查询。 具体操作步骤如下: 1. 在 HTML 中创建一个 table 元素,并添加 id 属性和 lay-filter 属性,用于后续在 JS 代码中调用。 ```html <table id="demo" lay-filter="test"></table> ``` 2. 在 JS 代码中,使用 table.render 方法渲染表格,并设置 page 参数为 true,开启分页功能。同,还需要设置 url 参数为数据接口的 URL。 ```javascript // 渲染表格 table.render({ elem: '#demo', url: '/getData', // 数据接口的 URL page: true, // 开启分页功能 cols: [[ {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱'}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', width: 80}, {field: 'score', title: '评分', width: 80}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', width: 135}, ]] }); ``` 3. 在服务端编写数据接口,用于返回分页数据。一般来说,需要接收两个参数:limit 和 page。其中,limit 表示每页显示的数据条数,page 表示当前页码。 ```python # Python Flask 示例代码 @app.route('/getData') def getData(): limit = request.args.get('limit', default=10, type=int) page = request.args.get('page', default=1, type=int) offset = (page - 1) * limit data = db.query('SELECT * FROM users LIMIT %s, %s', (offset, limit)) count = db.query('SELECT COUNT(*) FROM users')[0]['COUNT(*)'] return jsonify({"code": 0, "msg": "", "count": count, "data": data}) ``` 在这个示例中,我们通过 limit 和 page 参数来进行分页查询。同,还需要查询数据条数 count,以便在前端显示正确的分页信息。 4. 至此,翻页查询功能就已经实现了。在前端页面上,可以通过 layui分页组件来进行翻页操作,同数据也会动态刷新。 注意:在真实项目中,需要根据具体需求对分页功能进行定制,例如:自定义分页样式、添加搜索功能等。同,还需要注意安全性问题,防止 SQL 注入等攻击。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值