layui は非常に実用的なフロントエンド開発ライブラリです。これを使用すると、さまざまな美しいフロントエンド UI を簡単かつ簡単に作成できます。一般的に使用されるページング コンポーネントと、layui を使用してそれを完成させる方法を簡単に見てみましょう。ほんの数行のコードで十分です。
![レイウイのページングの使い方](https://img.php.cn/upload/article/000/000/037/5d2694386e284290.jpg)
#メソッド/ステップ
まず、lay に対応するスクリプト ファイルとスタイル ファイルを導入する必要があります。
![レイウイのページングの使い方 レイウイのページングの使い方](https://img.php.cn/upload/image/378/253/543/%E3%83%AC%E3%82%A4%E3%82%A6%E3%82%A4%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
HTML では、空の div を作成してページング コンポーネントを生成し、この div に ID を指定するだけです。
![1562807610649912.png レイウイのページングの使い方](https://img.php.cn/upload/image/939/156/760/1562807610649912.png)
js スクリプト コードでは、最初にレイページ ページング コンポーネント インスタンス オブジェクトを生成します。
![1562807626852513.png レイウイのページングの使い方](https://img.php.cn/upload/image/945/240/687/1562807626852513.png)
#次に、このオブジェクトの render メソッドを呼び出して、ページングの各要素をレンダリングします。
render メソッドでは、オブジェクトを渡します。elem は div の ID です。
count は、ページング オブジェクト内にデータがいくつあるかを示すために使用されます。
![1562807677599897.png レイウイのページングの使い方](https://img.php.cn/upload/image/997/705/178/1562807677599897.png)
このコードを実行すると、レンダリングされたページングが表示されます。非常に単純なコードで、美しいページングを取得できます。
![1562807695194245.png レイウイのページングの使い方](https://img.php.cn/upload/image/784/655/292/1562807695194245.png)
関連する推奨事項: 「
layui フレームワーク チュートリアル 」
上記のデータから、デフォルトでは 1 ページであることがわかります。データは10個。
もちろん、これを構成することもできます。ここでは、limit パラメーターを指定するだけで、4 に設定します。
![1562807712403192.png レイウイのページングの使い方](https://img.php.cn/upload/image/951/942/931/1562807712403192.png)
ページを更新すると、1 ページあたり 20 個のデータと 4 行のデータがあり、5 ページに分割されていることがわかります。
![レイウイのページングの使い方 レイウイのページングの使い方](https://img.php.cn/upload/image/791/374/209/%E3%83%AC%E3%82%A4%E3%82%A6%E3%82%A4%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
#ページング コントロールでは、非常に重要な機能はインタラクションの必要性です。つまり、特定のページをクリックした後、対応するページのデータを表示する必要があります。表示されます。
したがって、コンポーネントは対話用のジャンプ メソッドを提供します。このメソッドでは、パラメーター obj が渡されます。この obj から、現在のデータを取得する obj.cur などの一般的に使用されるデータを取得できます。ページ番号。
obj.limit は各ページに含まれるデータの数を取得できます。
![レイウイのページングの使い方 レイウイのページングの使い方](https://img.php.cn/upload/image/376/435/532/%E3%83%AC%E3%82%A4%E3%82%A6%E3%82%A4%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
![1562807768862501.png レイウイのページングの使い方](https://img.php.cn/upload/image/799/524/778/1562807768862501.png)
以上がレイウイのページングの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。