首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

layui实现动态和静态分页

Posted in Javascript onApril 28, 2018

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

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

layui动态数据表

动态数据表的效果图

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"); ?>
<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" style="width: 85px;">商户号</label>
      <div class="layui-input-inline" style="width: 165px;">
        <input type="text" name="merchant_no" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 85px;">订单号:</label>
      <div class="layui-input-inline" style="width: 165px;">
        <input type="text" name="order_no" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 95px;">发起时间</label>
      <div 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">
      </div>
      <div class="layui-form-mid">-</div>
      <div 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">
      </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>

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

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

layui实现动态和静态分页

只需要在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>

layui实现动态和静态分页

- Author -

laozhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
Javascript中的arguments对象
Jun 20 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 #Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 #Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 #Javascript
PL660(1) S2000(3) 南麂列岛(1) MX500(1) 根德(2) Panasonic(1) SRF-S84(1) 松下(1) 台湾(1) SRF-S83(1)
You might like
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）
2016/06/22 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python入门学习指南分享
2018/04/11 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
在网上学习全世界最好的课程：Coursera
2017/11/07 全球购物
美国运动鞋类和服装零售连锁店：Shoe Palace
2019/08/13 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
工作会议方案
2014/05/21 职场文书
永远是春天观后感
2015/06/12 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
六一儿童节致辞稿（3篇）
2019/07/11 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Mysql基础之常见函数
2021/04/22 MySQL
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL