分页插件 layui.laypage 的用法
参考 layui.laypage 官方文档 https://www.layui.com/demo/laypage.html
第一步下载插件 (注意不能只引入引入 layui.css和layui.js ,官方已经做了自动化构建,要把这个解压之后的文件放入项目根路径,文件的路径一定不能错!)
正确路径为
- ./layui/css/layui.css
- ./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 的用法的更多相关文章
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Mybatis分页插件PageHelper正确的用法(网上有2篇不够科学的文章)
今天下午在Mybatis项目中.实现分页.由于我是后加入项目中的,Leader用的是PageHelper这个组件.可是我在实际使用的过程中遇到了2个大问题. 1.p=2#comments" ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- 拿来主义:layPage分页插件的使用
布衣之谈 所谓插件,大概就是项目中可插可拔的比较小功能化的组件:这些功能组件若能力可及,自己也可以完成——也即自己造轮子,但翻看各种技术社区,相关领域的神人们往往会有更好的实现方案贡献出来,这个时候你 ...
- Flask学习之旅--分页功能:分别使用 flask--pagination 和分页插件 layPage
一.前言 现在开发一个网站,分页是一个很常见的功能了,尤其是当数据达到一定量的时候,如果都显示在页面上,会造成页面过长而影响用户体验,除此之外,还可能出现加载过慢等问题.因此,分页就很有必要了. 分页 ...
- 二十九、layui分页插件的使用
<div id="page1"></div> <script> //开启分页 var page = 1; function findstoreL ...
- 关于layui.laypage.render 刷新首页没有分页问题
前言: 最近写项目遇到一个问题,就是使用vue里的layui.laypage.render 分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于 ...
- 基于layPage分页插件浅析两种分页方式
最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
随机推荐
- Linux学习:进入与退出系统
进入Linux系统:必须要输入用户的账号,在系统安装过程中可以创建以下两种帐号: 1.root--超级用户帐号(系统管理员),使用这个帐号可以在系统中做任何事情. 2.普通用户--这个帐号供普通用户使 ...
- 一行代码解决 sql语句 in传入数组变字符串
--数组 var arrs= ['test1','test2','test3'];--变字符串 var instring = "'"+arrs.join("','&quo ...
- Spring Boot 整合MaBatis如何在控制台打印执行的SQL语句
yml文件:logging: level: com.XXX.Mapper: debug (红色部分为Dao层的包名,注意不是XML文件的包名) properties文件: logging.level. ...
- 【原】python3.6安装python-dev
[root@ci /usr/lib64/python3.6]# yum -y install python36-devel
- SpringBoot学习笔记(三)——Springboot配置文件
SpringBoot不像之前用spring+springMVC做项目的时候,他不需要配置大量的看上去很乱很复杂的xml配置文件.在SpringBoot中你可以通过java代码和注解配置项目,也可以通过 ...
- Update(Stage4):Spark原理_运行过程_高级特性
如何判断宽窄依赖: =================================== 6. Spark 底层逻辑 导读 从部署图了解 Spark 部署了什么, 有什么组件运行在集群中 通过对 W ...
- java之中文乱码处理
有些时候,比如文件操作的时候,特别是文件中有中文,会规定用GBK格式,这时读写文件,可能会出现中文乱码 资源文件乱码 文件内容乱码 资源文件乱码: 解决: PropertiesUtil proper ...
- 在一个不稳定的无效的ViewState净的应用问题。 Erratic Invalid Viewstate issue in a .NET application
这似乎是很多人都经历了同样的IE8的问题.似乎发生的是,不知何故,IE8(在IE8的渲染模式和IE7兼容模式)将失去4096个字节的HTML文档中该数据缺失导致此异常(通常你看到这一scriptres ...
- Pytorch-Faster-RCNN 中的 MAP 实现 (解析imdb.py 和 pascal_voc.py)
---恢复内容开始--- MAP是衡量object dectection算法的重要criteria,然而一直没有仔细阅读相关代码,今天就好好看一下: 1. 测试test过程是由FRCN/tools/t ...
- DC: 8-Write-up
下载地址:点我 哔哩哔哩:点我 信息收集 确定网段,找到虚拟机的IP,扫端口和服务. ➜ ~ nmap -sn 192.168.116.1/24 Starting Nmap 7.80 ( https: ...