社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 layui實現動態和靜態分頁

layui實現動態和靜態分頁

不言
不言
Apr 28, 2018 am 10:30 AM
layui 分頁 靜態

這篇文章透過實例給大家分享了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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7803
15
Java教學
1645
14
CakePHP 教程
1402
52
Laravel 教程
1300
25
PHP教程
1236
29
顯示更多
Related knowledge
layui登陸頁怎麼設定跳轉 layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

layui怎麼取得表單數據 layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法，包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數，以及監聽表單提交事件獲取資料。

layui跟vue有啥差別 layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素，提供預製元件簡化頁面建置；而Vue則是全端框架，注重資料綁定、元件化開發和狀態管理，更適合建構複雜應用程式。 layui學習簡單，適合快速建立頁面；Vue學習曲線陡峭，但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平，可以選擇合適的框架。

layui如何實現自適應 layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能，可以實現自適應佈局。步驟包括：引用layui框架。定義自適應佈局容器，設定layui-container類別。使用響應式斷點（xs/sm/md/lg）隱藏特定斷點下的元素。利用網格系統（layui-col-）指定元素寬度。透過偏移量（layui-offset-）建立間距。使用響應式實用工具（layui-invisible/show/block/inline）控制元素的可見性和顯示方式。

layui怎麼傳數據 layui怎麼傳數據 Apr 26, 2024 am 03:39 AM

使用 layui 傳輸資料的方法如下：使用 Ajax：建立請求對象，設定請求參數（URL、方法、資料），處理回應。使用內建方法：使用 $.post、$.get、$.postJSON 或 $.getJSON 等內建方法簡化資料傳輸。

layui是什麼意思啊 layui是什麼意思啊 Apr 04, 2024 am 04:33 AM

layui是一個前端UI框架，它提供了豐富的UI元件、工具和功能，幫助開發人員快速建立現代化、響應式和互動式Web應用程序，特點包括：靈活輕量、模組化設計、豐富的元件、強大的工具和易於自訂。它廣泛應用於各種Web應用程式的開發中，包括管理系統、電商平台、內容管理系統、社交網路和行動裝置應用程式。

layui框架是什麼語言 layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架，提供了一套易用的UI元件和工具，幫助開發者快速建立響應式網路應用程式。其特點包括：模組化、輕量級、響應式，並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便，缺點是客製化較差、技術更新較慢。

layui框架和vue框架的區別 layui框架和vue框架的區別 Apr 26, 2024 am 01:27 AM

layui和vue是前端框架，layui是一種輕量級的函式庫，提供UI元件和工具；vue是一個全面的框架，提供UI元件、狀態管理、資料綁定和路由等功能。 layui基於模組化的架構，vue是基於組件化的架構。 layui擁有較小的生態系統，vue擁有龐大且活躍的生態系統。 layui學習曲線較低，vue學習曲線較陡。 layui適用於小型專案和快速開發UI元件，vue適用於大型專案和需要豐富功能的場景。

See all articles