layui实现动态和静态分页

<!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">

<?php $this->import("head"); ?> <div class="layui-fluid"> <blockquote class="layui-elem-quote">注意:为保障访问速度,查询同时请配合时间范围,默认显示一天以内的记录</blockquote> <br/> <div class="layui-form-item layui-form-pane"> <div class="layui-inline"> <label class="layui-form-label" >商户号</label> <div class="layui-input-inline" > <input type="text" name="merchant_no" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" >订单号:</label> <div class="layui-input-inline" > <input type="text" name="order_no" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" >发起时间</label> <div class="layui-input-inline" > <input type="text" class="layui-input" name="start_time" id="test5" placeholder="yyyy-MM-dd HH:mm:ss"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline" > <input type="text" class="layui-input" name="end_time" id="test6" placeholder="yyyy-MM-dd HH:mm:ss"> </div> </div> <div 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> </div> </div> <table class="layui-hide" id="test"></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>

// 订单列表 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'); }

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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 });

相关阅读