layui(三)——laypage组件常见用法总结
laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法: laypage.render(options) 来设置基础参数。
一、laypage的常用基础参数
layui.use(['laypage'], function () {
laypage = layui.laypage
laypage.render({
elem: 'pageTest' //这是元素的id,不能写成"#pageTest"
, count: data.length //数据总数
, limit: 10 //每页显示条数
, limits: [10, 20, 30]
, curr: 1 //起始页
, groups: 5 //连续页码个数
, prev: '上一页' //上一页文本
, netx: '下一页' //下一页文本
, first: 1 //首页文本
, last: 100 //尾页文本
, layout: ['prev', 'page', 'next','limit','refresh','skip'] //跳转页码时调用
, jump: function (obj, first) { //obj为当前页的属性和方法,第一次加载first为true
// do something
if (!first) {
//非首次加载 do something
}
}
})
});
二、使用方式
在layui中的table中包含了laypage,这里就不再说明laytable中的分页用法,主要写一个后台分页,前端加载列表(非table中的列表)的栗子,具体为点击分类栏,主体部分显示对应的新闻列表。
<div class="category">
<ul id="newsTypeList">
<li class="hover" id="hyzxNews" data-typeId="1">新闻分类1</li>
<li data-typeId="2">新闻分类2</li>
<li data-typeId="3">新闻分类3</li>
<li data-typeId="4">新闻分类4</li>
</ul>
</div>
<h2 id="newsType">新闻分类1</h2>
<div class="list_box">
<ul id="newsList" class="list_ul"></ul>
<div id="demo7" style="text-align:center"></div>
</div>
<script>
layui.use(['laypage'], function () {
var laypage = layui.laypage
, layer = layui.layer; //---------------------------点击侧边类型,加载新闻列表
$('#newsTypeList li').click(function () {
var typeId = $(this).attr("data-typeId");
$.post('/News/GetNewsByPage', { page: 1, limit: 3, typeId: typeId }, function (result) {
res = result.data;
setHtml(res);
setStyle(typeId)
pages(result.count, typeId)//切换分类时候,调用页码,重新渲染
});
}).eq(0).click(); //--------------------------------分页组件渲染
function pages(count, typeId) {
laypage.render({
elem: 'demo7'
, count: count
, theme: '#4A90E2'
, layout: ['prev', 'page', 'next']
, limit: 3
, jump: function (obj, first) {
if (!first) {
$.post('/News/GetNewsByPage'
, { page: obj.curr, limit: obj.limit, typeId: typeId }
, function (result) {
res = result.data;
setHtml(res);
});
}
}
})
}
//--------------------------------写入后台内容
function setHtml(data) {
var strHtml = "";
$.each(data, function (index, item) {
strHtml += ('<li>${item.Title}</li>');
});
document.getElementById('newsList').innerHTML = strHtml;
}
//--------------------------------改变样式
function setStyle(typeId) {
$('ul.newsTypeList li').removeClass('hover');
$('ul.newsTypeList li[data-typeId=' + typeId + ']').addClass('hover');
$('#newsType').text($('ul#newsTypeList li[data-typeId=' + typeId + ']').text())
}
});
</script>
注:这是为了个人查找方便整理的文档,并没有总结完全,查看更多可访问官网http://www.layui.com/doc
layui(三)——laypage组件常见用法总结的更多相关文章
- layui(二)——layer组件常见用法总结
layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...
- layui(七)——rate组件常见用法总结
layui中提供了rate组件,用法很简单,直接上代码. <div id="test1"></div> <script> layui.use(' ...
- layui(六)——upload组件常见用法总结
layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...
- layui(九)——flow组件常见用法总结
该模块包含 信息流加载 和 图片懒加载 两大核心支持,无论是对服务端.还是前端体验,都有非常大的性能帮助.下边分别给出了这两种技术的使用方法 一.信息流加载 信息流加载的核心方法时 flow.l ...
- layui(五)——form组件常见用法总结
form 是我们非常看重的一块.layui中的form实现全自动的初始渲染,和基于事件驱动的接口书写方式.我整理了layui中form的配置.下边直接给一个栗子,后台采用.net MVC,除了razo ...
- layui(四)——table组件常见用法总结
table是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级 ...
- layui(一)——layDate组件常见用法
和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...
- RPA培训:RPA的核心三个组件常见部署方式(RPA学习天地)
整体架构 目前主流厂商的RPA平台就是由控制台.设计器和机器人这三个标准套件组成,这三个核心套件形成了RPA产品的基本要素.其它如AI平台.人机交互.流程挖掘.自动化中心等都是衍生出来的周边产品. 1 ...
- vue常见的三种组件通讯—props,$refs,this.$emit
一.父组件--->子组件 props 1.特点:props是用于父组件向子组件传递数据信息(props是单向绑定的,即只能父组件向子组件传递,不能反向 2.用法:父组件中使用子组件时,绑定要传递 ...
随机推荐
- Educational Codeforces Round 53 (Rated for Div. 2) C. Vasya and Robot
题意:给出一段操作序列 和目的地 问修改(只可以更改 不可以删除或添加)该序列使得最后到达终点时 所进行的修改代价最小是多少 其中代价的定义是 终点序号-起点序号-1 思路:因为代价是终点序号减去 ...
- [PA2012] Tax
传送门:>Here< 题意:给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是 ...
- Gitbash如何支持交互式命令?如何让gitbash的命令不乱码?winpty是什么鬼?干嘛用的?
winpty 是一个 Windows 软件包,提供了类似 Unix pty-master 一样的接口,用于实现控制台程序之间的通讯.该软件包包括一个开发库 (libwinpty) 和一个用于 ygwi ...
- ElasticSearch5.4.1 搜索引擎搭建文档
安装配置JDK环境JDK安装(不能安装JRE)JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-download ...
- 洛谷P1829 [国家集训队]Crash的数字表格
题目描述 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能同时整除a和b的最小正整数.例如,LCM(6, ...
- 【BZOJ5332】[SDOI2018]旧试题(数论,三元环计数)
[BZOJ5332][SDOI2018]旧试题(数论,三元环计数) 题面 BZOJ 洛谷 题解 如果只有一个\(\sum\),那么我们可以枚举每个答案的出现次数. 首先约数个数这个东西很不爽,就搞一搞 ...
- hdu 1978 How many ways(记忆化搜索)
这是一个简单的生存游戏,你控制一个机器人从一个棋盘的起始点(1,1)走到棋盘的终点(n,m).游戏的规则描述如下:1.机器人一开始在棋盘的起始点并有起始点所标有的能量.2.机器人只能向右或者向下走,并 ...
- 关于xshell 无法连接虚拟机之我的解决方案
先说一下我碰到的问题 1,虚拟机配置网络后,并且选的模式是桥接模式,虚拟机中可以访问外网,宿主机中也可以访问外网,虚拟机中可以ping通宿主机,但是宿主机无法ping通虚拟机 解决: 我的原因:我会出 ...
- Redis和memcached区别须知
1.支持的数据类型不同(memcached只支持简单的key-value的数据类型,Redis支持5种数据类型(1.string,2.list,3.set,4.zset,5.hash)) 2.redi ...
- (计算几何 线段判交) 51nod1264 线段相交
1264 线段相交 给出平面上两条线段的两个端点,判断这两条线段是否相交(有一个公共点或有部分重合认为相交). 如果相交,输出"Yes",否则输出"No". ...