How to use layui.laypage-Layui Tutorial-php.cn

How to use layui.laypage

藏色散人

Release： 2020-11-18 11:28:41

Original

2444 people have browsed it

How to use layui.laypage: First download the layui.laypage plug-in; then pass "$('.layui-laypage .layui-laypage-curr em').css('background','')" Just use the module.

How to use layui.laypage

Recommendation: "layUI Tutorial"

Reference layui.laypage official document https://www.layui. com/demo/laypage.html

The first step is to download the plug-in (note that you cannot only introduce layui.css and layui.js. The official has done automated construction. You must put the decompressed file into the project root. Path, the path of the file must not be wrong!)

The correct path is

./layui/css/layui.css
./layui/ layui.js

##The second step is to use the 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)  //这个是数据请求接口的函数封装
               }
            })
        })
    }

Copy after login

 list=( i=;i<data.info.list.length;i++

Copy after login

There is a pitfall here, it is natural to use the page Load the interface for requesting data. Although the code is the same, it will loop infinitely when running, so we need to re-encapsulate the data request function

The above is the detailed content of How to use layui.laypage. For more information, please follow other related articles on the PHP Chinese website!