layui table分页前端后台功能

最新推荐文章于 2025-04-08 14:34:44 发布

liwei10822

最新推荐文章于 2025-04-08 14:34:44 发布

阅读量2.4k

点赞数

文章标签： layui javascript ecmascript

本文链接：https://blog.youkuaiyun.com/liwei10822/article/details/122345118

版权

本文详细介绍了layui框架如何实现简单高效的分页功能，包括前端js配置、后台数据处理以及响应参数定义。通过实例演示了如何定制表格请求参数和响应结构，适合中小型项目的快速开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、layui 一个简单轻量级的后台框架，中小型项目非常合适，容易上手，处理优秀，后续会根据整理把一下坑记录下来供大家参考

1、分页效果：

2、分页说明：layui对于分页封装的非常简单了，会默认带两个参数请求后台page默认为0，limit默认为10，当然可以重新定义，至于多少页、上页、下页、跳转指定页由layui 自动封装核算出来page、limit，后台只要提供总数据count数量。

2.1 js代码

table.render({
    elem: '#currentTableId', //显示的表格ID
    url: '/platform/systemUserGetPage',//请求URL
    method:"post",//请求方式
    toolbar: '#toolbarDemo',//表格加入操作按钮ID
    defaultToolbar: ['filter', 'exports', 'print', {//表格设置
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
    }],
    request: {//请求参数重定义
      pageName:'currentPageNo',//页码名称默认为 page
      limitName:'pageSize'  //页码数量默认为 limit
    },
    response:{//返回参数重定义
      countName: 'totalConout',//数据总数 默认为count
      dataName: 'data'//数据体 默认为data
    },
    cols: [//表格内容填充
            [
              {type: "checkbox", width: 50},
              {field: 'sysId', width: 100, title: '账号ID', sort: true},
              {field: 'username', width: 120, title: '账号名'},
              {field: 'roleName', width: 120, title: '角色'},
              {field: 'sysSex', width: 80, title: '性别', sort: true,templet: function(data){if(data.sysSex == 1){return '男'}else{return '女'}}},
              {field: 'sysAge', width: 80, title: '年龄'},
              {field: 'sysMobile',width: 150, title: '手机号码',sort: true },
              {field: 'sysEamil', width: 220, title: '邮箱', sort: true},
              {field: 'accoutExpireFlag', width: 120, title: '账户过期', sort: true,templet: function(data){if(data.accoutExpireFlag == true){return '正常'}else{return '冻结'}}},//判断数据显示
              {field: 'accountLockFlag', width: 120, title: '账户锁定', sort: true,templet: function(data){if(data.accountLockFlag == true){return '正常'}else{return '冻结'}}},
              {field: 'passowrdExpireFlag', width: 120, title: '密码过期', sort: true,templet: function(data){if(data.passowrdExpireFlag == true){return '正常'}else{return '冻结'}}},
              {field: 'sysStatusFlag', width: 120, title: '账户可用', sort: true,templet: function(data){if(data.sysStatusFlag == true){return '正常'}else{return '冻结'}}}
           /*   {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}*/
            ]
         ],
    limits: [10, 15, 20],//每页数据显示量
    limit: 10,//默认每页数据显示量
    page: true,//是否分页
    skin: 'line' //表格风格样式
});

2.2后台代码定义一个请求类和返回类