検索
ホームページウェブフロントエンドjsチュートリアルLauiui で動的および静的ページングを実装する手順の詳細な説明

Lauiui で動的および静的ページングを実装する手順の詳細な説明

php中世界最好的语言
php中世界最好的语言
May 15, 2018 am 10:16 AM
layuiページネーション成し遂げる

今回は、Layui で動的ページングと静的ページングを実装する手順について詳しく説明します。Layui で動的ページングと静的ページングを実装するための 注意事項 とは何ですか。実際のケースを見てみましょう。

開発管理バックエンドは、バックエンド プログラマーとしてすべての開発者が知っておく必要があるリンクです。そのため、現時点では、会社のコア メンバーでない場合は、そのデータを取得することはできません。特定のデータについては、現時点では PS から Linux まですべての作業を自分たちで行う必要があり、フロントエンド フレームワーク laui を発見したため、プレッシャーは大幅に軽減されました。

今日はまず、layui が動的データ テーブル、静的データ テーブル、およびテーブル ページングを実装する方法を学びます。これには、データ テーブルの動的更新、データ テーブル ツールバーの使用、フォーム送信、その他の機能も含まれます。この静的ページングは​​、次の機能にも適用できます。情報 ウェブサイトの場合、私の作業開発環境は Debian デスクトップ版なので、すべての実験も Debian に基づいてテストされています

layui 動的データ テーブル

動的データ テーブルのレンダリング

実装プロセス

ビジネスロジック

フロントエンド コード:

head.phtml (ヘッダー ファイル コード) 

nbsp;html>


  <meta>
  <meta>
  <title><?php  echo $curTitle;?></title>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <link>
  <link>
  <script></script>
  <!--引入自定义模块全局配置文件-->
  <script></script>

order_orderlist.phtml (メインビジネスコード)

<?php  $this->import("head"); ?>
<p>
  </p><blockquote>注意:为保障访问速度,查询同时请配合时间范围,默认显示一天以内的记录</blockquote>
  <br>
  <p>
    </p><p>
      <label>商户号</label>
      </p><p>
        <input>
      </p>
    
    <p>
      <label>订单号:</label>
      </p><p>
        <input>
      </p>
    
    <p>
      <label>发起时间</label>
      </p><p>
        <input>
      </p>
      <p>-</p>
      <p>
        <input>
      </p>
    
    <p>
      <button><i></i>查询</button>
      <button><i>ဂ</i>刷新数据</button>
      <button><i>ဂ</i>刷新页面</button>
    </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>

バックエンド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>已推送</span>" : "<span>未推送</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 を表示し、慎重に研究し、分析します

データテーブルツールバーイベント

ツールバーは、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('submit(*)', function(data){
 console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
今日操作するデータテーブルもこの方法を使用しています。まず、ツールの生成とレンダリングの方法を見てみましょう。ボディ部分にコンテナを挿入するだけです。ここの

javascript

のタイプは text/html です。これは、layui が解析するためのものです。ここでの d は、データをレンダリングするときに使用するもので、すべてのフィールドの値はこの d




  <script>
    <a class="layui-btn layui-btn-xs" user_id="{{d.admin_id}}" lay-event="edit">编辑
  </script>I で取得できます。この記事の事例を読んだ後は、この方法を習得したと考えてください。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 
推奨読書: 
vue+jquery+lodash スライド時のトップフローティング固定関数の詳しい説明




 Angular5のルートパラメータ渡しの使い方の詳しい説明
以上がLauiui で動的および静的ページングを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
JavaScript、C、およびブラウザの関係JavaScript、C、およびブラウザの関係May 01, 2025 am	 12:06 AM
はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか
node.jsは、型を使用してストリーミングしますnode.jsは、型を使用してストリーミングしますApr 30, 2025 am	 08:22 AM
node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。  ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます
Python vs. JavaScript：パフォーマンスと効率の考慮事項Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am	 12:08 AM
PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。
JavaScriptの起源：その実装言語の調査JavaScriptの起源：その実装言語の調査Apr 29, 2025 am	 12:51 AM
JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。
舞台裏：JavaScriptをパワーする言語は何ですか？舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am	 12:01 AM
JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。
PythonとJavaScriptの未来：傾向と予測PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am	 12:21 AM
PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。
Python vs. JavaScript：開発環境とツールPython vs. JavaScript：開発環境とツールApr 26, 2025 am	 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScriptはCで書かれていますか？証拠を調べるJavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am	 12:15 AM
はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。
See all articles
ホットAIツール
Undresser.AI Undress
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
Undress AI Tool
脱衣画像を無料で
Clothoff.io
Clothoff.io
AI衣類リムーバー
Video Face Swap
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
もっと見る
人気の記事
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前ByDDD
KB5055523を修正する方法Windows 11にインストールできませんか？
2週間前ByDDD
Inzoi：学校と大学への応募方法
4週間前ByDDD
KB5055518を修正する方法Windows 10にインストールできませんか？
2週間前ByDDD
Atomfallのサイトオフィスキーを見つける場所
4週間前ByDDD
もっと見る
ホットツール
ゼンドスタジオ 13.0.1
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
MantisBT
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
mPDF
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
WebStorm Mac版
WebStorm Mac版
便利なJavaScript開発ツール
VSCode Windows 64 ビットのダウンロード
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
もっと見る
ホットトピック
Gmailメールのログイン入り口はどこですか？
7866
15
Java チュートリアル
1649
14
CakePHP チュートリアル
1407
52
Laravel チュートリアル
1301
25
PHP チュートリアル
1243
29
もっと見る