php laypage,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中的列表)的栗子,具体为点击分类栏,主体部分显示对应的新闻列表。
- 新闻分类1
- 新闻分类2
- 新闻分类3
- 新闻分类4
新闻分类1
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 += ('
${item.Title}');
});
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())
}
});
更多layui知识请关注layui使用教程栏目。
php laypage,layui laypage组件常见用法总结相关推荐
- layui分页组件layPage动态调整总页数
我的小工程的前端使用了layui,这也是当时临时上网查到的一个框架,感觉风格简约,而且据称对后端开发人员很友好. 在使用layui的过程中,我遇到了一些问题,在这里将几个个人感觉比较棘手的问题列举一下 ...
- java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖 主要是jquery-1.11. ...
- layui分页组件使用
<div id="test1"></div><script src="/static/build/layui.js">< ...
- 关于layui.laypage.render 刷新首页没有分页问题
前言: 最近写项目遇到一个问题,就是使用vue里的layui.laypage.render 分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于 ...
- vue-router 的常见用法
vue-router 的常见用法 1. 路由重定向 路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面. 通过路由规则的 redirect 属性,指定一个新 ...
- URL 重写的常见用法
URL 重写的常见用法 创建数据驱动的 ASP.NET 网站时,通常会产生一个单个的网页,该网页基于查询字符串参数显示数据库数据的子集.例如,在设计电子商务站点时,您的任务之一便是允许用户浏览待售产品 ...
- layui的layer的用法
layui的layer的用法 1.加载layui框架的项目包,一定要及得在文本就绪时间中初始化layui组件,否则可能导致多个组件无法使用. https://www.layui.com/doc/mod ...
- 【JavaScript:语法】javascript函数定义以及常见用法
转载:javascript函数定义以及常见用法 javascript函数定义以及常见用法 我们知道,js函数有多种写法,函数声明 ,函数表达式,Function式构造函数,自执行函数,包括Es6的箭头 ...
- MQ消息队列的常见用法
消息队列MQ是分布式中重要的组件 目前常见的消息队列有三种:ActiveMQ,RabbitMQ,Kafka 今天我想来梳理一下MQ消息队列的具体常见用法: 1.异步处理 用户注册之后,需要发短信和加积 ...
最新文章
- 深入理解多线程(三)—— Java的对象头
- DOS命令查看网络信息
- vue 直接访问静态图片_vue中本地静态图片路径写法
- java设置窗口不可移动_Java – JDialog不可移动
- 【零散积累】 vim常用操作
- 【AI视野·今日Robot 机器人论文速览 第十六期】Tue, 29 Jun 2021
- uos的安全检测:sqlite-jdbc访问/tmp目录的提示
- projectwbs表_从Project 2007导出WBS图表到Visio 2007
- 服务器系统哪个版本速度快,Windows服务器操作系统哪个版本好?
- 这两种方法能使PDF不能被复制和修改
- 使用Animate制作汽车广告动画
- 图像的特征提取——HOG特征、Harr特征、LBP特征
- java 环绕通知_SpringAOP四种通知类型+环绕通知
- install package vif包_Go Lang 开发笔记《Golang的包管理》
- 赛尔号对战c语言程序,秘密军事会议 赛尔号9月10日攻略
- 【分享】Python的QQ群
- 什么是企业架构师?关于这个角色,你需要知道的一切及其未来发展
- 推荐系统4--AutoRec与Deep Crossing(改变神经网络的复杂程度)
- Pandaboard OMAP4460用linaro android源码启动
- 取得比普通员工(员工代码没有在mgr字段上出现的)的最高薪水还要高的领导人姓名
热门文章
- 2019牛客多校第七场E Find the median 权值线段树+离散化
- referer参数和addslashes()函数的骚路子
- 外围功能电路控制 LET′S TRY“嵌入式编程”: 4 of 6
- WPF 中设置Combox下拉框Text 显示值
- 通过profile 用maven命令打不同配置的变量包
- 简单排序算法设计(Java)
- 《PWA实战:面向下一代的Progressive Web APP》读书笔记
- C#常用单元测试框架比较:XUnit、NUnit和Visual Studio(MSTest)
- Redis基于客户端分片的集群案例(待实践)
- Spark RDD算子介绍