开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从ps到linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．
今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能，这个静态分页同样适用在信息类网站,我的工作开发环境是debian桌面版，所以所有的实验也是在debian基础上测试
layui动态数据表
动态数据表的效果图
实现过程
业务逻辑我都写到注释里面了，这样大家也友好一些，避免一会看代码，一会看说明容易分神
前端代码：
head.phtml（头文件代码）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title><?php echo $curtitle;?></title> <meta name="renderer" content="webkit"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="static/css/layui.css" rel="external nofollow" media="all"> <link rel="stylesheet" href="static/css/globals.css" rel="external nofollow" media="all"> <script src="static/layui.js" charset="utf-8"></script> <!--引入自定义模块全局配置文件--> <script src="static/global.js" charset="utf-8"></script> </head> <body class="layui-layout-body">
order_orderlist.phtml（主体业务代码）
<?php $this->import(head); ?> <p class="layui-fluid"> <blockquote class="layui-elem-quote">注意:为保障访问速度,查询同时请配合时间范围,默认显示一天以内的记录</blockquote> <br/> <p class="layui-form-item layui-form-pane"> <p class="layui-inline"> <label class="layui-form-label" style="width: 85px;">商户号</label> <p class="layui-input-inline" style="width: 165px;"> <input type="text" name="merchant_no" autocomplete="off" class="layui-input"> </p> </p> <p class="layui-inline"> <label class="layui-form-label" style="width: 85px;">订单号:</label> <p class="layui-input-inline" style="width: 165px;"> <input type="text" name="order_no" autocomplete="off" class="layui-input"> </p> </p> <p class="layui-inline"> <label class="layui-form-label" style="width: 95px;">发起时间</label> <p class="layui-input-inline" style="width: 165px;"> <input type="text" class="layui-input" name="start_time" id="test5" placeholder="yyyy-mm-dd hh:mm:ss"> </p> <p class="layui-form-mid">-</p> <p class="layui-input-inline" style="width: 165px;"> <input type="text" class="layui-input" name="end_time" id="test6" placeholder="yyyy-mm-dd hh:mm:ss"> </p> </p> <p class="layui-inline"> <button id="fuck-btn" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon"></i>查询</button> <button id="reloadtable" class="layui-btn layui-btn-normal"><i class="layui-icon">ဂ</i>刷新数据</button> <button id="reloadpage" class="layui-btn layui-btn-normal"><i class="layui-icon">ဂ</i>刷新页面</button> </p> </p> <table class="layui-hide" id="test"></table> </p> <script> // 加载需要用到的模块，如果有使用到自定义模块也在此加载 layui.use(['laydate','form','table'], function(){ // 初始化元素，如果有大量的元素操作可以也引入和初始化element模块 var table = layui.table; var form = layui.form; var laydate = layui.laydate; var $ = layui.$; // 定义时间选择器 laydate.render({ elem:'#test5', type:'datetime' }); laydate.render({ elem:'#test6', type:'datetime' }); // 动态数据表渲染 table.render({ elem: '#test' /* 绑定表格容器id */ ,url:'index.php?c=orders&a=orderlist' /* 获取数据的后端api url */ ,where:{getlist:'orderlist'} /* 这里还可以额外的传参到后端 */ ,method: 'post' /* 使用什么协议，默认的是get */ ,cellminwidth: 60 /* 最小单元格宽度 */ ,cols: [[ {field:'orderno', title: '订单号',align: 'center',sort:true} ,{field:'username', title: '商户号',align: 'center'} ,{field:'user_orderno', title: '商户订单号',align: 'center'} ,{field:'trace_time', title: '创建时间',align: 'center',sort:true,width:200} ,{field:'price', title: '交易金额',align: 'center',sort:true} ,{field:'fee', title: '手续费',align: 'center',sort:true,width:80} ,{field:'real_price', title: '结算金额',align: 'center',sort:true} ,{field:'pay_type', title: '支付类型', align: 'center'} ,{field:'pay_status', title: '订单状态',align: 'center',width:90} ,{field:'pay_time', title: '支付时间',align: 'center',sort:true,width:200} ,{field:'push_nums', title: '通知次数',align: 'center',width:90} ,{field:'notice_result', title: '通知支付结果',align: 'center'} ]] // 使用sort将自动为我们添加排序事件，完全不用人工干预 ,page: true ,limit:10 ,id:'testreload' // 这里就是重载的id }); // 数据表重载，这个是配合上面的表格一起使用的 var active = { reload:function(){ table.reload('testreload',{ // 点击查询和刷新数据表会把以下参数传到后端进行查找和分页显示 where:{ merchant_no:$(input[name='merchant_no']).val(), order_no: $(input[name='order_no']).val(), start_time:$(input[name='start_time']).val(), end_time:$(input[name='end_time']).val() } }); } }; form.render(); // 渲染表单 // 查找点击时间，这里的事件绑定建议使用on来绑定,因为元素都是后期渲染过的 $(#fuck-btn).click(function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); $(#reloadtable).click(function(){ active.reload(); }); $(#reloadpage).click(function(){ location.reload(); }); }); </script> </body> </html>
后端php代码
order.php(订单控制器,部分业务代码不用太深究）
// 订单列表 public function orderlist() { // 动态渲染前台表格 $operating = $this->request->getpost('getlist', 'trim'); // 首次这里不会执行，数据表开始渲染的时候才会请求以下部分 if ('orderlist' === $operating) { // 进行分页查询 $page = $this->request->getpost('page', 'intval', 1); $limit = $this->request->getpost('limit', 'intval', 10); $start = ($page - 1) * $limit; // 如果有其他条件查询在这里可以带上 $merchant_no = $this->request->getpost('merchant_no', 'trim', ''); $order_no = $this->request->getpost('order_no', 'trim', ''); $start_time = $this->request->getpost('start_time', 'trim', date(y-m-d h:i:s, strtotime(-1 day))); $end_time = $this->request->getpost('end_time', 'trim', date(y-m-d h:i:s), time()); // 获取符合条件的记录数量 if($globals['session']['admin_group_id'] >1){ $merchant_no = $globals['session']['admin_username']; } $order_nums = orders::getitemnums($merchant_no, $order_no, $start_time, $end_time); // 分页进行查询条件记录 $order_list = orders::getitem($merchant_no, $order_no, $start_time, $end_time, $start, $limit); $datas = ['code' => 0, 'msg' => '']; // 将总的记录条数传给前台进行渲染分页 $datas['count'] = $order_nums; // 重新过滤一遍数据，很多没有用到的不能全部发给试图，尤其是动态渲染的，很容易暴露，建议加工一下再传 foreach ($order_list as $k => $v) { $order_list[$k]['orderno'] = $v['order_id']; $order_list[$k]['user_orderno'] = $v['order_no']; $order_list[$k]['username'] = $v['merchant_no']; $order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? 支付宝扫码 : 微信扫码; $order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? 已支付 : 未支付; $order_list[$k]['pay_time'] = $v['callback_time']; $order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? <span class=\"layui-badge layui-bg-blue\">已推送</span> : <span class=\"layui-badge layui-bg-gray\">未推送</span>; } // 将数据通过json格式响应给前台渲染 $datas['data'] = $order_list; echo json_encode($datas); safe_exit(); } // 首次先现实模板页 self::$view->render('orders_orderlist'); }
数据格式请参照官方指导：
数据接口格式
{code:0,msg:,count:1000,data:[{id:10000,username:user-0,sex:女,city:城市-0,sign:签名-0,experience:255,logins:24,wealth:82830700,classify:作家,score:57},{id:10001,username:user-1,sex:男,city:城市-1,sign:签名-1,experience:884,logins:58,wealth:64928690,classify:词人,score:27},{id:10002,username:user-2,sex:女,city:城市-2,sign:签名-2,experience:650,logins:77,wealth:6298078,classify:酱油,score:31},{id:10003,username:user-3,sex:女,city:城市-3,sign:签名-3,experience:362,logins:157,wealth:37117017,classify:诗人,score:68},{id:10004,username:user-4,sex:男,city:城市-4,sign:签名-4,experience:807,logins:51,wealth:76263262,classify:作家,score:6},{id:10005,username:user-5,sex:女,city:城市-5,sign:签名-5,experience:173,logins:68,wealth:60344147,classify:作家,score:87},{id:10006,username:user-6,sex:女,city:城市-6,sign:签名-6,experience:982,logins:37,wealth:57768166,classify:作家,score:34},{id:10007,username:user-7,sex:男,city:城市-7,sign:签名-7,experience:727,logins:150,wealth:82030578,classify:作家,score:28},{id:10008,username:user-8,sex:男,city:城市-8,sign:签名-8,experience:951,logins:133,wealth:16503371,classify:词人,score:14},{id:10009,username:user-9,sex:女,city:城市-9,sign:签名-9,experience:484,logins:25,wealth:86801934,classify:词人,score:75},{id:10010,username:user-10,sex:女,city:城市-10,sign:签名-10,experience:1016,logins:182,wealth:71294671,classify:诗人,score:34},{id:10011,username:user-11,sex:女,city:城市-11,sign:签名-11,experience:492,logins:107,wealth:8062783,classify:诗人,score:6},{id:10012,username:user-12,sex:女,city:城市-12,sign:签名-12,experience:106,logins:176,wealth:42622704,classify:词人,score:54},{id:10013,username:user-13,sex:男,city:城市-13,sign:签名-13,experience:1047,logins:94,wealth:59508583,classify:诗人,score:63},{id:10014,username:user-14,sex:男,city:城市-14,sign:签名-14,experience:873,logins:116,wealth:72549912,classify:词人,score:8},{id:10015,username:user-15,sex:女,city:城市-15,sign:签名-15,experience:1068,logins:27,wealth:52737025,classify:作家,score:28},{id:10016,username:user-16,sex:女,city:城市-16,sign:签名-16,experience:862,logins:168,wealth:37069775,classify:酱油,score:86},{id:10017,username:user-17,sex:女,city:城市-17,sign:签名-17,experience:1060,logins:187,wealth:66099525,classify:作家,score:69},{id:10018,username:user-18,sex:女,city:城市-18,sign:签名-18,experience:866,logins:88,wealth:81722326,classify:词人,score:74},{id:10019,username:user-19,sex:女,city:城市-19,sign:签名-19,experience:682,logins:106,wealth:68647362,classify:词人,score:51},{id:10020,username:user-20,sex:男,city:城市-20,sign:签名-20,experience:770,logins:24,wealth:92420248,classify:诗人,score:87},{id:10021,username:user-21,sex:男,city:城市-21,sign:签名-21,experience:184,logins:131,wealth:71566045,classify:词人,score:99},{id:10022,username:user-22,sex:男,city:城市-22,sign:签名-22,experience:739,logins:152,wealth:60907929,classify:作家,score:18},{id:10023,username:user-23,sex:女,city:城市-23,sign:签名-23,experience:127,logins:82,wealth:14765943,classify:作家,score:30},{id:10024,username:user-24,sex:女,city:城市-24,sign:签名-24,experience:212,logins:133,wealth:59011052,classify:词人,score:76},{id:10025,username:user-25,sex:女,city:城市-25,sign:签名-25,experience:938,logins:182,wealth:91183097,classify:作家,score:69},{id:10026,username:user-26,sex:男,city:城市-26,sign:签名-26,experience:978,logins:7,wealth:48008413,classify:作家,score:65},{id:10027,username:user-27,sex:女,city:城市-27,sign:签名-27,experience:371,logins:44,wealth:64419691,classify:诗人,score:60},{id:10028,username:user-28,sex:女,city:城市-28,sign:签名-28,experience:977,logins:21,wealth:75935022,classify:作家,score:37},{id:10029,username:user-29,sex:男,city:城市-29,sign:签名-29,experience:647,logins:107,wealth:97450636,classify:酱油,score:27}]}
表格模块：http://www.layui.com/doc/modules/table.html
调试的时候可以打开chrome,firefox 的 console 和 network进行查看，仔细研究分析
数据表工具条事件
工具栏是指在行单元格内可以操作对应的行，因为使用layui的元素监听，很容易就获取到相应对应整行的数据.
比如获取表单的数据,只需要监听表单提交事件，直接就可以一次获取到所有的参数和值：
<script> layui.use(['form','jquery'],function(){ let form = layui.form, $ = layui.$; form.on('submit(fuck-submit)', function(data){ if(data.field.password && data.field.password.length < 5){ layer.msg('密码不能小于５位'); return false; } $.post('index.php?&a=adminedit&op=update&uid='+data.field.uid,{ username:data.field.username, password:data.field.password, level:data.field.level, is_enabled:data.field.is_enabled }, function(responsetext){ //console.log(responsetext); if(responsetext.errno === 8){ layer.msg(responsetext.errstr,{icon:6}); return false; } else { layer.msg(responsetext.errstr,{icon:5}); location.reload(); } },'json' ); return false; }); }); </script>
这里是官方文档的：
form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素dom对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 });
我们今天要操作的数据表也是要采用这种方式，首先我们看看看怎样生成和渲染出工具条：
只需要在body部分插入一个容器,注意这里的javascript的type是text/html,这个是供layui解析用的，在这里的d也就是我们在渲染表格的时候的数据,所有的字段的值都可以在这个d里面获取到
<table class="layui-hide" lay-filter="fucktest" id="test"></table> <script type="text/html" id="bardemo"> <a class="layui-btn layui-btn-xs" user_id="{{d.admin_id}}" lay-event="edit">编辑</a> </script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue+jquery+lodash滑动时顶部悬浮固定功能实现详解
angular5路由传参使用详解
以上就是layui动态与静态分页实现步骤详解的详细内容。