分页插件 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开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
随机推荐
- Java常用API——Arrays工具类
介绍:Arrays工具类提供了一些可以直接操作数组的方法,以下是一些常用方法: int binarySearch(type[] a, type key):要求数组a元素升序排列,使用二分法搜索key的 ...
- python学习笔记:分支 与 循环
if 语句 if 条件: ...... # 条件为真的时候,执行缩进的代码 if 条件: ...... # 条件为真的时候执行 else: ...... # 条件为假的时候执行 if 条件1: ... ...
- ZOJ1004 Anagrams by Stack
题目大意:规定 i 为入栈,o 为出栈,现在给两个字符串st1,st2,现在要将st1转化为st2,转化方法是,st1中字符从头开始入栈,并合理出栈构造出st2.请输出所有可能的出入栈步骤. 深度优先 ...
- 解决游览器安装Vue.js devtools插件无效的问题
一: 打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色 解决方案: 1.我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilib ...
- 27 JavaScript的引入&注释&弹窗&变量常量&数据类型及转换&内存&垃圾回收
JS的引入: 1 内部引入 绑定元素事件如onclick="" 绑定锚点如href="JavaScript:void(0)" script标签引入,注意:如果标 ...
- JavaScript动画相关
JS动画原理 通过CSS缓慢变化从而实现动画效果 获取css属性 Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素 ...
- 【PAT甲级】1002 A+B for Polynomials (25 分)
题意:给出两个多项式,计算两个多项式的和,并以指数从大到小输出多项式的指数个数,指数和系数. AAAAAccepted code: #include<bits/stdc++.h> usin ...
- spring使用context:property-placeholder载不进属性问题
环境:spring3.1.1+mybatis3.2.8+mybatis-spring1.2.3 今天整合了SpringMVC + MyBatis,发现了一个问题,在这里做个记录,各位如果遇到相同的问题 ...
- Centos7618安装Docker
本文基于Centos7.6.18进行安装与测试 移除旧的版本: $ sudo yum remove docker \ docker-client \ docker-client-latest \ do ...
- python中的 dir()内置函数的作用以及使用方法
dir() 内置函数的作用 python 内置方法有很多,无论是初学者还是精通python 的程序员都不能全部即住所有的方法,这时候 dir() 方法就非常有用了,使用 dir()函数可以查看对象内的 ...