开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．

今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能，这个静态分页同样适用在信息类网站,我的工作开发环境是debian桌面版，所以所有的实验也是在debian基础上测试

layui动态数据表

动态数据表的效果图

实现过程

业务逻辑我都写到注释里面了，这样大家也友好一些，避免一会看代码，一会看说明容易分神

前端代码：

head.phtml（头文件 代码）

301_25@ <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <?php echo $curTitle;?> <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"> nofollow" media="all"> nofollow" media="all">

order_orderlist.phtml（主体业务代码）

import("head"); ?>

查询同时请配合时间范围,默认显示一天以内的记录

查询

后端PHP 代码

order.PHP(订单控制器,部分业务代码不用太深究）

request->getPost('getlist','trim'); // 首次这里不会执行，数据表开始渲染的时候才会请求以下部分 if ('orderlist' === $operating) { // 进行分页查询 $page = $this->request->getPost('page','intval',1); $limit = $this->request->getPost('limit',10); $start = ($page - 1) * $limit;

  // 如果有其他条件<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>在这里可以带上
  $merchant_no = $this->request->getPost('merchant_no','trim','');
  $order_no = $this->request->getPost('order_no','');
  $start_time = $this->request->getPost('start_time',date("Y-m-d H:i:s",strtotime("-1 day")));
  $end_time = $this->request->getPost('end_time',date("Y-m-d H:i:s"),time());

  // <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>符合条件的记录<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>
  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);

  // <a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>进行<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>条件记录
  $order_list = orders::getItem($merchant_no,$end_time,$start,$limit);
  $datas = ['code' => 0,'msg' => ''];
  // 将总的记录条数传给<a href="https://www.jb51.cc/tag/qiantai/" target="_blank" class="keywords">前台</a>进行渲染<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>
  $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\"&gt;已推送</span>" : "<span class=\"layui-badge layui-bg-gray\"&gt;未推送</span>";
  }
  // 将数据通过json格式响应给<a href="https://www.jb51.cc/tag/qiantai/" target="_blank" class="keywords">前台</a>渲染
  $datas['data'] = $order_list;
  echo json_encode($datas);
  safe_exit();
}
// 首次先现实模板页
self::$view->render('orders_orderlist');

}

数据格式请参照官方指导：

数据接口格式

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","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"score":6},{"id":10005,"username":"user-5","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"score":87},{"id":10006,"username":"user-6","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"score":34},{"id":10007,"username":"user-7","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"score":28},{"id":10008,"username":"user-8","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"score":14},{"id":10009,"username":"user-9","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"score":75},{"id":10010,"username":"user-10","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,{"id":10011,"username":"user-11","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,{"id":10012,"username":"user-12","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"score":54},{"id":10013,"username":"user-13","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"score":63},{"id":10014,"username":"user-14","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"score":8},{"id":10015,"username":"user-15","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,{"id":10016,"username":"user-16","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"score":86},{"id":10017,"username":"user-17","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"score":69},{"id":10018,"username":"user-18","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"score":74},{"id":10019,"username":"user-19","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"score":51},{"id":10020,"username":"user-20","city":"城市-20","sign":"签名-20","experience":770,"wealth":92420248,{"id":10021,"username":"user-21","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"score":99},{"id":10022,"username":"user-22","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"score":18},{"id":10023,"username":"user-23","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"score":30},{"id":10024,"username":"user-24","city":"城市-24","sign":"签名-24","experience":212,"wealth":59011052,"score":76},{"id":10025,"username":"user-25","city":"城市-25","sign":"签名-25","experience":938,"wealth":91183097,{"id":10026,"username":"user-26","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"score":65},{"id":10027,"username":"user-27","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"score":60},{"id":10028,"username":"user-28","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"score":37},{"id":10029,"username":"user-29","city":"城市-29","sign":"签名-29","experience":647,"wealth":97450636,"score":27}]}

表格模块：http://www.layui.com/doc/modules/table.html

调试的时候可以打开chrome,firefox 的 console 和 network进行查看，仔细研究分析

数据表工具条事件

工具栏是指在行单元格内可以操作对应的行，因为使用layui的元素监听，很容易就获取到相应对应整行的数据.

比如获取表单的数据,只需要监听表单提交事件，直接就可以一次获取到所有的参数和值：

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; }); });

这里是官方文档的：

标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 });

我们今天要操作的数据表也是要采用这种方式，首先我们看看看怎样生成和渲染出工具条：