Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging

Layui ialah rangka kerja UI bahagian hadapan yang ringan yang memberikan kesederhanaan Beautiful komponen antara muka dan pengalaman interaktif yang kaya. Semasa pembangunan, kita sering menghadapi situasi di mana kita perlu memaparkan sejumlah besar data dan melakukan paging. Berikut adalah contoh halaman paparan data dengan fungsi paging yang dibangunkan menggunakan Layui.

Pertama sekali, kami perlu memperkenalkan fail dan kebergantungan Layui yang berkaitan. Tambahkan kod berikut pada teg halaman 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.reloadrrreee

Seterusnya, kita perlu mencipta bekas yang mengandungi data dan penomboran. Sebagai contoh, kita boleh menggunakan elemen <tbody> untuk memaparkan data dan menambah <div> di bahagian bawah halaman untuk memaparkan kandungan berkaitan penomboran.

rrreee

Kini, kami boleh menggunakan JavaScript untuk memuatkan data secara dinamik dan menomborkannya. Pertama, kita perlu memulakan beberapa komponen Layui.

rrreee

Kod di atas menggunakan komponen jadual dan laypage Layui. Mula-mula, jadual data dipaparkan melalui kaedah table.render, di mana parameter url menentukan alamat antara muka data dan cols parameter mentakrifkan medan pengepala dan tajuk. Kemudian gunakan kaedah $.get untuk mendapatkan jumlah bilangan data dan memaparkan komponen halaman melalui kaedah laypage.render. #🎜🎜##🎜🎜#Apabila penomboran diklik, fungsi panggil balik lompat akan dicetuskan dan data akan dimuat semula. Melalui kaedah table.reload, kami boleh memasukkan nombor halaman semasa untuk memuatkan data yang sepadan. #🎜🎜##🎜🎜#Perlu diingatkan bahawa antara muka data dalam contoh di atas perlu mengembalikan format data yang memenuhi keperluan Layui Untuk butiran, sila rujuk dokumentasi Layui. #🎜🎜##🎜🎜#Melalui langkah di atas, kita boleh menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging. Keseluruhan prosesnya ringkas dan mudah difahami, membolehkan pengguna menyemak imbas dan mengurus sejumlah besar data dengan pantas. #🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!