参考 layui.laypage 官方文档 https://www.layui.com/demo/laypage.html

第一步下载插件 (注意不能只引入引入 layui.css和layui.js ,官方已经做了自动化构建,要把这个解压之后的文件放入项目根路径,文件的路径一定不能错!)

正确路径为

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

第二步就是模块的使用

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

在这里有一个坑就是,理所当然的用了页面加载进来请求数据的接口,虽然代码是一样,但是跑起来会无限循环,所以要重新封装一下数据请求函数

分页插件 layui.laypage 的用法的更多相关文章

  1. LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  2. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Mybatis分页插件PageHelper正确的用法(网上有2篇不够科学的文章)

    今天下午在Mybatis项目中.实现分页.由于我是后加入项目中的,Leader用的是PageHelper这个组件.可是我在实际使用的过程中遇到了2个大问题. 1.p=2#comments" ...

  4. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  5. 拿来主义:layPage分页插件的使用

    布衣之谈 所谓插件,大概就是项目中可插可拔的比较小功能化的组件:这些功能组件若能力可及,自己也可以完成——也即自己造轮子,但翻看各种技术社区,相关领域的神人们往往会有更好的实现方案贡献出来,这个时候你 ...

  6. Flask学习之旅--分页功能:分别使用 flask--pagination 和分页插件 layPage

    一.前言 现在开发一个网站,分页是一个很常见的功能了,尤其是当数据达到一定量的时候,如果都显示在页面上,会造成页面过长而影响用户体验,除此之外,还可能出现加载过慢等问题.因此,分页就很有必要了. 分页 ...

  7. 二十九、layui分页插件的使用

    <div id="page1"></div> <script> //开启分页 var page = 1; function findstoreL ...

  8. 关于layui.laypage.render 刷新首页没有分页问题

    前言: 最近写项目遇到一个问题,就是使用vue里的layui.laypage.render 分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于 ...

  9. 基于layPage分页插件浅析两种分页方式

    最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...

随机推荐

  1. 聊聊面试中常问的GC机制

    GC 中文直译垃圾回收,是一种回收内存空间避免内存泄漏的机制.当 JVM 内存紧张,通过执行 GC 有效回收内存,转而分配给新对象从而实现内存的再利用. JVM GC 机制虽然无需开发主动参与,减轻不 ...

  2. python opencv:代码执行时间计算

    t1 = cv2.getTickCount() # ...... t2 = cv2.getTickCount() # 计算花费的时间:毫秒 time = (t2-t1) / cv2.getTickFr ...

  3. L298N模块的使用(文末有惊喜)

    这个模块有两个供电口,标示着“12V输入”的是功率驱动电源输入,供电范围可以是7-46V, 一般12V供电就能满足我们大部分的DIY需求.标示着“5V输出可不接”的是逻辑供电, 当我们将“板载5V输出 ...

  4. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  5. python查看包路径及对象的所有方法名

    进入python环境: python 输入如下代码: import sys sys.path = sys.path[:] import django print(django.__path__) 得到 ...

  6. JS打开浏览器新窗口

    window.open(URL,name,features,replace); 参数 描述 URL 一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串, ...

  7. 导入jeesite 项目

    1:从开源中国用git方式下载jeesite源码 链接https://gitee.com/thinkgem/jeesite    gti 地址:https://gitee.com/thinkgem/j ...

  8. 树莓派4B踩坑指南 - (10)安装坚果云(更新:暂不支持)

    191209更新: 根据坚果云用户支持(helpdesk@nutstore.net)的官方回复,客户端不支持arm,所以本篇后续内容可以不用看了.. 原文如下: "您好,客户端似乎不支持ar ...

  9. DC: 8-Write-up

    下载地址:点我 哔哩哔哩:点我 信息收集 确定网段,找到虚拟机的IP,扫端口和服务. ➜ ~ nmap -sn 192.168.116.1/24 Starting Nmap 7.80 ( https: ...

  10. Thread的join方法

    一个线程在执行的过程中,可能调用另一个线程,前者可以称为调用线程,后者成为被调用线程. Thread.Join方法的使用场景:调用线程挂起,等待被调用线程执行完毕后,继续执行. 如下案列: 当NewT ...