LayUIはフロントエンドページング機能を実装します

この記事では主に、LayUIに基づいたフロントエンドページング機能を実装する方法を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. LayUIの紹介

Layuiは独自のモジュール仕様で書かれた国産のフロントエンドUIフレームワークであり、ネイティブHTML/CSS/JSの記述形式を踏襲しており、敷居が非常に低いです。箱の。いくつかの共通の要素とコンポーネントを備えた組み込みの UI フレームワーク。

ダウンロード後、プロジェクトに導入してください。

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="external nofollow" >
<script src="${pageContext.request.contextPath}/js/layui.js" ></script>

2. LayPage パラメーターの概要

laypage は、ページング時に直接呼び出すことができる組み込みのカプセル化されたオブジェクトです。ここには主に次のパラメーターがあり、laypage のキーと値のペアのセットを構成するために使用されます。

キー	デフォルト値	タイプ	説明
続き	必須d	文字列/​​オブジェクト	コンテナ。値は要素 ID またはネイティブ DOM または jquery オブジェクトで渡すことができます
pages	Required	Number	ページ数
curr	1	番号	現在のページ。
groups	5	Number	連続するページの数。
skin	default	String	コントロールページネーションスキン
first	1	数値/文字列/ブール	使用ホームページを制御するため。 first: false、ホームページ項目を表示しないことを意味します
last	ページの合計値	Number/String/Boolean	は、最後のページを制御するために使用されます。 last: false、最後のページ項目
prev	previous page	String/Boolean	が前のページを制御するために使用されることを意味します。表示されない場合は
next	Next page	String/Boolean	をfalseに設定して次のページを制御します。表示されない場合は、 false を設定してください。
jump	コアパラメータ	Function	は、ページング後にコールバックをトリガーし、関数は2つのパラメータを返します。 obj はオブジェクトタイプです。ページングのすべての構成情報が含まれます。 まず、ページが最初に読み込まれたかどうかを検出するブールクラスです。無限リフレッシュを避けるのに非常に役立ちます。

3. ページングの実装

フロントエンドにページを表示します。コードは次のとおりです:

<script>
 var pcountString= "${pcount}";
 var psizeString= "${psize}";
 var pcountInt= parseInt(pcountString);//总页数
 var psizeInt=parseInt(psizeString); //页面大小
 var pindex = "${pindex}";// 当前页
 var ptotalpages=Math.ceil(pcountInt/psizeInt);// 总记录数
 layui.define(['layer', 'laypage' ], function(exports) {
  var layer = layui.layer;
  var laypage = layui.laypage;
  var pcount = pcountInt;// 总记录数
  var psize = psizeInt;// 每一页的记录数
  // 分页
  laypage({
   cont : 'pagination', // 页面上的id
   pages : ptotalpages,//总页数
   curr : pindex,//当前页
   skin: '#999999',//颜色
   jump : function(obj, first) {
    if (!first) {
     var parId=$("#parId").val();
     var pindex=obj.curr;
    window.location.href="${ctx}/web/rest/RecycleManage/GetFileList?parId=" rel="external nofollow" +parId+"&pindex="+pindex;//跳转链接
    }
   }
  });
 });
</script>

ページネーションの効果は次のとおりです:

フロントエンドページングに関する10のおすすめ記事

jQuery フロントエンド ページングの例 Sharing_jquery

以上がLayUIはフロントエンドページング機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。