Comment utiliser Layui pour développer une page d'affichage de données avec fonction de pagination

Comment utiliser Layui pour développer une page d'affichage de données avec fonction de pagination

Layui est un framework d'interface utilisateur frontal léger qui fournit des composants d'interface simples et esthétiques et une expérience interactive riche. Au cours du développement, nous rencontrons souvent des situations où nous devons afficher de grandes quantités de données et effectuer une pagination. Ce qui suit est un exemple de page d'affichage de données avec fonction de pagination développée à l'aide de Layui.

Tout d'abord, nous devons présenter les fichiers et dépendances pertinents de Layui. Ajoutez le code suivant à la balise de la page 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

Ensuite, nous devons créer un conteneur qui contient les données et la pagination. Par exemple, nous pouvons utiliser un élément <tbody> pour afficher les données, et ajouter un <div> en bas de la page pour afficher le contenu lié à la pagination.

rrreee

Nous pouvons désormais utiliser JavaScript pour charger dynamiquement des données et les paginer. Tout d’abord, nous devons initialiser certains composants de Layui.

rrreee

Le code ci-dessus utilise les composants table et laypage de Layui. Tout d'abord, la table de données est rendue via la méthode table.render, dans laquelle le paramètre url spécifie l'adresse de l'interface de données, et le paramètre cols Le paramètre définit les champs d'en-tête et le titre. Utilisez ensuite la méthode $.get pour obtenir le nombre total de données et restituez le composant de pagination via la méthode laypage.render. 🎜🎜Lorsque vous cliquez sur la pagination, la fonction de rappel jump sera déclenchée et les données seront rechargées. Grâce à la méthode table.reload, nous pouvons transmettre le numéro de page actuel pour charger les données correspondantes. 🎜🎜Il convient de noter que l'interface de données dans l'exemple ci-dessus doit renvoyer un format de données qui répond aux exigences de Layui. Pour plus de détails, veuillez vous référer à la documentation de Layui. 🎜🎜Grâce aux étapes ci-dessus, nous pouvons utiliser Layui pour développer une page d'affichage de données avec fonction de pagination. L'ensemble du processus est simple et facile à comprendre, permettant aux utilisateurs de parcourir et de gérer rapidement de grandes quantités de données. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!