Layuiを使用してページング機能を備えたデータ表示ページを開発する方法

Layui を使用してページング機能を備えたデータ表示ページを開発する方法

Layui は、シンプルで美しいインターフェイス コンポーネントと豊富なインタラクティブ性を提供する軽量のフロントエンド UI フレームワークです。経験。開発中、大量のデータを表示し、ページングを実行する必要がある状況によく遭遇します。以下はLayuiを使用して開発したページング機能付きのデータ表示ページの例です。

まず、Layui の関連ファイルと依存関係を導入する必要があります。次のコードを HTML ページの タグに追加します。

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

次に、データとページネーションを含むコンテナを作成する必要があります。たとえば、<tbody> 要素を使用してデータを表示し、ページの下部に <div> を追加してページネーション関連のコンテンツを表示できます。

<table class="layui-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="dataContainer"></tbody>
</table>

<div id="pageContainer" class="layui-laypage"></div>

これで、JavaScript を使用してデータを動的にロードし、ページ分割することができます。まず、Layui のいくつかのコンポーネントを初期化する必要があります。

layui.use(['table', 'laypage'], function(){
  var table = layui.table;
  var laypage = layui.laypage;

  // 数据接口
  var dataUrl = 'path/to/your/data';

  // 渲染表格
  table.render({
    elem: '#dataContainer',
    url: dataUrl,
    page: false, // 首次不显示分页
    cols: [[ // 表头
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'gender', title: '性别'}
    ]]
  });

  // 获取数据总数
  $.get(dataUrl, function(res){
    var total = res.data.length;

    // 渲染分页
    laypage.render({
      elem: 'pageContainer',
      count: total,
      limit: 10,  // 每页显示的数量
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],  // 显示方式
      jump: function(obj, first){
        if(!first){
          // 点击分页时重新加载数据
          table.reload('dataContainer', {
            page: {
              curr: obj.curr // 当前页码
            }
          });
        }
      }
    });
  });
});

上記のコードは、Layui の table コンポーネントと laypage コンポーネントを使用しています。まず、データ テーブルが table.render メソッドを通じてレンダリングされます。このメソッドでは、url パラメータでデータ インターフェイスのアドレスを指定し、cols パラメータで以下を定義します。テーブルヘッダーのフィールドとタイトル。次に、$.get メソッドを使用してデータの総数を取得し、laypage.render メソッドを使用してページング コンポーネントをレンダリングします。

ページングをクリックすると、jump コールバック関数がトリガーされ、データが再ロードされます。 table.reload メソッドを通じて、現在のページ番号を渡して、対応するデータをロードできます。

上記の例のデータ インターフェイスは、Layui の要件を満たすデータ形式を返す必要があることに注意してください。詳細については、Layui のドキュメントを参照してください。

上記の手順により、Layui を使用してページング機能を備えたデータ表示ページを開発できます。プロセス全体がシンプルで理解しやすいため、ユーザーは大量のデータをすばやく参照して管理できます。

以上がLayuiを使用してページング機能を備えたデータ表示ページを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。