Maison > interface Web > Tutoriel Layui > le corps du texte

Comment utiliser layui.laypage

藏色散人
Libérer: 2020-11-18 11:28:41
original
2420 Les gens l'ont consulté

Comment utiliser layui.laypage : Téléchargez d'abord le plug-in layui.laypage ; puis transmettez "$('.layui-laypage .layui-laypage-curr em').css('background',' ')" Utilisez simplement le module.

Comment utiliser layui.laypage

Recommandé : "Tutoriel layUI"

Référez-vous à la documentation officielle de layui.laypage https://www.layui .com/demo/laypage.html

La première étape consiste à télécharger le plug-in (notez que vous ne pouvez pas simplement introduire layui.css et layui.js. Le responsable a effectué une construction automatisée. Vous devez mettre le fichier décompressé dans la racine du projet. Chemin, le chemin du fichier ne doit pas être erroné ! )

Le chemin correct est

    1. ./layui/css/layui .css
    2. ./layui/ layui.js

La deuxième étape consiste à utiliser le module

    //分页    function cutPage(pagesCount){
        layui.use(['laypage', 'layer'], function(){              var laypage = layui.laypage,
              layer = layui.layer;              //总页数大于页码总数              laypage.render({
                elem: 'cutPage',//分页容器 ,html代码为 <p id=&#39;cutPage&#39;></p>
                count:pagesCount ,//数据总数,数据总数后台会在第一次页面加载的时候返回给你
                limit:5, //每页展示的数据条数
                jump: function(obj){ //jump主要是包含要执行的函数
                  console.log(obj.curr)  //分页器的页码,作为请求参数
                  $('.layui-laypage .layui-laypage-curr em').css('background','#009688')
                  cutAdvertList(obj.curr)  //这个是数据请求接口的函数封装
               }
            })
        })
    }
Copier après la connexion
 list=( i=;i<data.info.list.length;i++
Copier après la connexion

Il y a un piège ici, il est naturel d'utiliser la page Charger l'interface pour demander des données Bien que le code soit le même, il bouclera à l'infini lors de l'exécution, il faut donc réencapsuler la fonction de demande 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal