开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．
今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能，这个静态分页同样适用在信息类网站,我的工作开发环境是debian桌面版，所以所有的实验也是在debian基础上测试
layui动态数据表
动态数据表的效果图
实现过程
业务逻辑我都写到注释里面了，这样大家也友好一些，避免一会看代码，一会看说明容易分神
前端代码：
head.phtml（头文件代码）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1"> <title><?php echo $curTitle;?></title> <meta content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="black"> <meta content="yes"> <meta content="telephone=no"> <link href="https://www.jb51.net/static/css/layui.css" media="all"> <link href="https://www.jb51.net/static/css/globals.css" media="all"> <script src="https://www.jb51.net/static/layui.js" charset="utf-8"></script> <!--引入自定义模块全局配置文件--> <script src="https://www.jb51.net/static/global.js" charset="utf-8"></script> </head> <body>
order_orderlist.phtml（主体业务代码）
<?php $this->import("head"); ?> <div> <blockquote>注意:为保障访问速度,查询同时请配合时间范围,默认显示一天以内的记录</blockquote> <br/> <div> <div> <label>商户号</label> <div> <input type="text" autocomplete="off"> </div> </div> <div> <label>订单号:</label> <div> <input type="text" autocomplete="off"> </div> </div> <div> <label>发起时间</label> <div> <input type="text" placeholder="yyyy-MM-dd HH:mm:ss"> </div> <div>-</div> <div> <input type="text" placeholder="yyyy-MM-dd HH:mm:ss"> </div> </div> <div> <button data-type="reload"><i></i>查询</button> <button><i>ဂ</i>刷新数据</button> <button><i>ဂ</i>刷新页面</button> </div> </div> <table></table> </div> <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(订单控制器,部分业务代码不用太深究）