搜尋

首頁 >web前端 >js教程 >layui實現動態和靜態分頁

layui實現動態和靜態分頁

不言
不言原創
2018-04-28 10:30:082566瀏覽

這篇文章透過實例給大家分享了layui實現動態和靜態分頁的詳細方法，以及效果展示，有需要的朋友可以跟著參考學習下。

開發管理後台是每個開發人員都要熟悉的環節，作為後端程式設計師，公司的所有機密資料都掌握在我們手上，所以這個時候，如果不是公司的核心成員，是不能接觸到某些數據的，這時候所有的工作都落到了我們的手上，從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([&#39;laydate&#39;,&#39;form&#39;,&#39;table&#39;], function(){
    // 初始化元素，如果有大量的元素操作可以也引入和初始化element模块
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var $ = layui.$;
    // 定义时间选择器
    laydate.render({
      elem:&#39;#test5&#39;,
      type:&#39;datetime&#39;
    });
    laydate.render({
      elem:&#39;#test6&#39;,
      type:&#39;datetime&#39;
    });
    // 动态数据表渲染
    table.render({
       elem: &#39;#test&#39;              /* 绑定表格容器id */
      ,url:&#39;index.php?c=orders&a=orderList&#39;   /* 获取数据的后端API URL */
      ,where:{getlist:&#39;orderlist&#39;}       /* 这里还可以额外的传参到后端 */
      ,method: &#39;post&#39;              /* 使用什么协议，默认的是GET */
      ,cellMinWidth: 60             /* 最小单元格宽度 */
      ,cols: [[
         {field:&#39;orderno&#39;, title: &#39;订单号&#39;,align: &#39;center&#39;,sort:true}
        ,{field:&#39;username&#39;, title: &#39;商户号&#39;,align: &#39;center&#39;}
        ,{field:&#39;user_orderno&#39;, title: &#39;商户订单号&#39;,align: &#39;center&#39;}
        ,{field:&#39;trace_time&#39;, title: &#39;创建时间&#39;,align: &#39;center&#39;,sort:true,width:200}
        ,{field:&#39;price&#39;, title: &#39;交易金额&#39;,align: &#39;center&#39;,sort:true}
        ,{field:&#39;fee&#39;, title: &#39;手续费&#39;,align: &#39;center&#39;,sort:true,width:80}
        ,{field:&#39;real_price&#39;, title: &#39;结算金额&#39;,align: &#39;center&#39;,sort:true}
        ,{field:&#39;pay_type&#39;, title: &#39;支付类型&#39;, align: &#39;center&#39;}
        ,{field:&#39;pay_status&#39;, title: &#39;订单状态&#39;,align: &#39;center&#39;,width:90}
        ,{field:&#39;pay_time&#39;, title: &#39;支付时间&#39;,align: &#39;center&#39;,sort:true,width:200}
        ,{field:&#39;push_nums&#39;, title: &#39;通知次数&#39;,align: &#39;center&#39;,width:90}
        ,{field:&#39;notice_result&#39;, title: &#39;通知支付结果&#39;,align: &#39;center&#39;}
      ]]  // 使用sort将自动为我们添加排序事件，完全不用人工干预
      ,page: true
      ,limit:10
      ,id:&#39;testReload&#39; // 这里就是重载的id
    });
    // 数据表重载，这个是配合上面的表格一起使用的
    var active = {
      reload:function(){
        table.reload(&#39;testReload&#39;,{
        　　 // 点击查询和刷新数据表会把以下参数传到后端进行查找和分页显示
          where:{
            merchant_no:$("input[name=&#39;merchant_no&#39;]").val(),
            order_no: $("input[name=&#39;order_no&#39;]").val(),
            start_time:$("input[name=&#39;start_time&#39;]").val(),
            end_time:$("input[name=&#39;end_time&#39;]").val()
          }
        });
      }
    };
    
    form.render(); // 渲染表单
    // 查找点击时间，这里的事件绑定建议使用on来绑定,因为元素都是后期渲染过的
    $("#fuck-btn").click(function(){
      var type = $(this).data(&#39;type&#39;);
      active[type] ? active[type].call(this) : &#39;&#39;;
    });
    $("#reloadtable").click(function(){
      active.reload();
    });
    $("#reloadpage").click(function(){
      location.reload();
    });
  });
</script>
</body>
</html>

後端php代碼

order.php(訂單控制器,部分業務代碼不用太深究）

#
  // 订单列表
  public function orderList()
  {
    // 动态渲染前台表格
    $operating = $this->request->getPost(&#39;getlist&#39;, &#39;trim&#39;);
    // 首次这里不会执行，数据表开始渲染的时候才会请求以下部分
    if (&#39;orderlist&#39; === $operating) {
      // 进行分页查询
      $page = $this->request->getPost(&#39;page&#39;, &#39;intval&#39;, 1);
      $limit = $this->request->getPost(&#39;limit&#39;, &#39;intval&#39;, 10);
      $start = ($page - 1) * $limit;

      // 如果有其他条件查询在这里可以带上
      $merchant_no = $this->request->getPost(&#39;merchant_no&#39;, &#39;trim&#39;, &#39;&#39;);
      $order_no = $this->request->getPost(&#39;order_no&#39;, &#39;trim&#39;, &#39;&#39;);
      $start_time = $this->request->getPost(&#39;start_time&#39;, &#39;trim&#39;, date("Y-m-d H:i:s", strtotime("-1 day")));
      $end_time = $this->request->getPost(&#39;end_time&#39;, &#39;trim&#39;, date("Y-m-d H:i:s"), time());

      // 获取符合条件的记录数量
      if($GLOBALS[&#39;SESSION&#39;][&#39;admin_group_id&#39;] >1){
        $merchant_no = $GLOBALS[&#39;SESSION&#39;][&#39;admin_username&#39;];
      }
      $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 = [&#39;code&#39; => 0, &#39;msg&#39; => &#39;&#39;];
      // 将总的记录条数传给前台进行渲染分页
      $datas[&#39;count&#39;] = $order_nums;
      // 重新过滤一遍数据，很多没有用到的不能全部发给试图，尤其是动态渲染的，很容易暴露，建议加工一下再传
      foreach ($order_list as $k => $v) {
        $order_list[$k][&#39;orderno&#39;] = $v[&#39;order_id&#39;];
        $order_list[$k][&#39;user_orderno&#39;] = $v[&#39;order_no&#39;];
        $order_list[$k][&#39;username&#39;] = $v[&#39;merchant_no&#39;];
        $order_list[$k][&#39;pay_type&#39;] = ($v[&#39;pay_type&#39;] == 1) ? "支付宝扫码" : "微信扫码";
        $order_list[$k][&#39;pay_status&#39;] = ($v[&#39;callback_status&#39;] > 0) ? "已支付" : "未支付";
        $order_list[$k][&#39;pay_time&#39;] = $v[&#39;callback_time&#39;];
        $order_list[$k][&#39;notice_result&#39;] = ($v[&#39;push_status&#39;] > 0) ? "<span class=\"layui-badge layui-bg-blue\">已推送</span>" : "<span class=\"layui-badge layui-bg-gray\">未推送</span>";
      }
      // 将数据通过json格式响应给前台渲染
      $datas[&#39;data&#39;] = $order_list;
      echo json_encode($datas);
      safe_exit();
    }
    // 首次先现实模板页
    self::$view->render(&#39;orders_orderlist&#39;);
  }

##資料格式請參考官方指導：

資料介面格式

{"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([&#39;form&#39;,&#39;jquery&#39;],function(){
    let form = layui.form,
      $ = layui.$;
    form.on(&#39;submit(fuck-submit)&#39;, function(data){
      if(data.field.password && data.field.password.length < 5){
        layer.msg(&#39;密码不能小于５位&#39;);
        return false;
      }
      $.post(&#39;index.php?&a=adminEdit&op=update&uid=&#39;+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();
          }
        },&#39;json&#39;
      );
      return false;
    });
  });
</script>

這裡是官方文檔的：

form.on(&#39;submit(*)&#39;, 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>

#

以上是layui實現動態和靜態分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：文字超過規定行數時自動產生省略號下一篇：文字超過規定行數時自動產生省略號

相關文章

看更多