layui實現(xiàn)動態(tài)和靜態(tài)分頁

更新時間：2018年04月28日 10:21:19 投稿：laozhang

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

開發(fā)管理后臺是每一個開發(fā)人員都要熟悉的一個環(huán)節(jié)，作為后端程序員，公司的所有機密數(shù)據(jù)都掌握在我們手上，所以這個時候，如果不是公司的核心成員，是不能接觸到某些數(shù)據(jù)的，這個時候所有的工作都落到了我們的手上，從PS到Linux都需要我們親歷親為，還好發(fā)現(xiàn)了layui這個前端框架，很大程度上減輕了我們的壓力．

今天我們先來學習一下layui實現(xiàn)動態(tài)數(shù)據(jù)表，靜態(tài)數(shù)據(jù)表，以及表格的分頁，其中還涉及到動態(tài)刷新數(shù)據(jù)表,數(shù)據(jù)表工具欄使用,表單提交等功能，這個靜態(tài)分頁同樣適用在信息類網(wǎng)站,我的工作開發(fā)環(huán)境是debian桌面版，所以所有的實驗也是在debian基礎上測試

layui動態(tài)數(shù)據(jù)表

動態(tài)數(shù)據(jù)表的效果圖

實現(xiàn)過程

業(yè)務邏輯我都寫到注釋里面了，這樣大家也友好一些，避免一會看代碼，一會看說明容易分神

前端代碼：

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（主體業(yè)務代碼）

<?php $this->import("head"); ?>
<div class="layui-fluid">
  <blockquote class="layui-elem-quote">注意:為保障訪問速度,查詢同時請配合時間范圍,默認顯示一天以內(nèi)的記錄</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;">發(fā)起時間</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">&#xe615;</i>查詢</button>
      <button id="reloadtable" class="layui-btn layui-btn-normal"><i class="layui-icon">&#x1002;</i>刷新數(shù)據(jù)</button>
      <button id="reloadpage" class="layui-btn layui-btn-normal"><i class="layui-icon">&#x1002;</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'
    });
    // 動態(tài)數(shù)據(jù)表渲染
    table.render({
       elem: '#test'              /* 綁定表格容器id */
      ,url:'index.php?c=orders&a=orderList'   /* 獲取數(shù)據(jù)的后端API URL */
      ,where:{getlist:'orderlist'}       /* 這里還可以額外的傳參到后端 */
      ,method: 'post'              /* 使用什么協(xié)議，默認的是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: '創(chuàng)建時間',align: 'center',sort:true,width:200}
        ,{field:'price', title: '交易金額',align: 'center',sort:true}
        ,{field:'fee', title: '手續(xù)費',align: 'center',sort:true,width:80}
        ,{field:'real_price', title: '結算金額',align: 'center',sort:true}
        ,{field:'pay_type', title: '支付類型', align: 'center'}
        ,{field:'pay_status', title: '訂單狀態(tài)',align: 'center',width:90}
        ,{field:'pay_time', title: '支付時間',align: 'center',sort:true,width:200}
        ,{field:'push_nums', title: '通知次數(shù)',align: 'center',width:90}
        ,{field:'notice_result', title: '通知支付結果',align: 'center'}
      ]]  // 使用sort將自動為我們添加排序事件，完全不用人工干預
      ,page: true
      ,limit:10
      ,id:'testReload' // 這里就是重載的id
    });
    // 數(shù)據(jù)表重載，這個是配合上面的表格一起使用的
    var active = {
      reload:function(){
        table.reload('testReload',{
        　　 // 點擊查詢和刷新數(shù)據(jù)表會把以下參數(shù)傳到后端進行查找和分頁顯示
          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(訂單控制器,部分業(yè)務代碼不用太深究）

  // 訂單列表
  public function orderList()
  {
    // 動態(tài)渲染前臺表格
    $operating = $this->request->getPost('getlist', 'trim');
    // 首次這里不會執(zhí)行，數(shù)據(jù)表開始渲染的時候才會請求以下部分
    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());

      // 獲取符合條件的記錄數(shù)量
      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' => ''];
      // 將總的記錄條數(shù)傳給前臺進行渲染分頁
      $datas['count'] = $order_nums;
      // 重新過濾一遍數(shù)據(jù)，很多沒有用到的不能全部發(fā)給試圖，尤其是動態(tài)渲染的，很容易暴露，建議加工一下再傳
      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>";
      }
      // 將數(shù)據(jù)通過json格式響應給前臺渲染
      $datas['data'] = $order_list;
      echo json_encode($datas);
      safe_exit();
    }
    // 首次先現(xiàn)實模板頁
    self::$view->render('orders_orderlist');
  }

數(shù)據(jù)格式請參照官方指導：

數(shù)據(jù)接口格式

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

調(diào)試的時候可以打開chrome,firefox 的 console 和 network進行查看，仔細研究分析

數(shù)據(jù)表工具條事件

工具欄是指在行單元格內(nèi)可以操作對應的行，因為使用layui的元素監(jiān)聽，很容易就獲取到相應對應整行的數(shù)據(jù).

比如獲取表單的數(shù)據(jù),只需要監(jiān)聽表單提交事件，直接就可以一次獲取到所有的參數(shù)和值：

<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) //被執(zhí)行事件的元素DOM對象，一般為button對象
 console.log(data.form) //被執(zhí)行提交的form對象，一般在存在form標簽時才會返回
 console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
 return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});

我們今天要操作的數(shù)據(jù)表也是要采用這種方式，首先我們看看看怎樣生成和渲染出工具條：

只需要在body部分插入一個容器,注意這里的javascript的type是text/html,這個是供layui解析用的，在這里的d也就是我們在渲染表格的時候的數(shù)據(jù),所有的字段的值都可以在這個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>

您可能感興趣的文章:

js a標簽點擊事件
本文將詳細介紹a標簽上的點擊事件的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
巧用canvas
作為一項有意思的新技術，canvas給我們帶來了對網(wǎng)頁繪圖和網(wǎng)頁動畫的新革命。本文簡單介紹下canvas實用的功能，下面跟著小編一起來看下吧
2017-01-01
js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
下面小編就為大家?guī)硪黄猨s調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
Bootstrap的popover(彈出框)在append后彈不出(失效)
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
js點擊列表文字對應該行顯示背景顏色的實現(xiàn)代碼
這篇文章主要介紹了js點擊列表文字對應該行顯示背景顏色的實現(xiàn)代碼,感興趣的小伙伴可以參考下
2015-08-08
在頁面上點擊任一鏈接時觸發(fā)一個事件的代碼
在頁面上點擊任一鏈接時觸發(fā)一個事件的代碼...
2007-04-04
JavaScript事件冒泡與事件捕獲實例分析
這篇文章主要介紹了JavaScript事件冒泡與事件捕獲,結合實例形式分析了事件冒泡、阻止冒泡以及事件捕獲的相關原理、操作技巧與注意事項,需要的朋友可以參考下
2018-08-08
手把手教你做超酷的條形碼效果
手把手教你做超酷的條形碼效果...
2007-04-04
javascrit中undefined和null的區(qū)別詳解
這篇文章主要介紹了javascrit中undefined和null的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
webpack將js打包后的map文件詳解
下面小編就為大家分享一篇webpack將js打包后的map文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02