php laypage,layui laypage组件常见用法总结

ccff72033e4fe89199d6c5841a9c731a.png

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使用教程栏目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Swift标识符和关键字

任何一种计算机语言都离不开标识符和关键字,下面我们将详细介绍Swift标识符和关键字。 标示符 标识符就是给变量、常量、方法、函数、枚举、结构体、类、协议等指定的名字。构成标识符的字母均有一定的规范,Swift语言中标识符的命名规则如下:…

xhost和XServer相关概念汇总

1、xhost 控制什么人可以访问当前主机上的增强 X-Windows。语法:xhost [ | - ] [ Name ] 2、xhost 是用来控制X server访问权限的。通常当你从hostA登陆到hostB上运行hostB上的应用程序时,做为应用程序来说,hostA是client,但是对图形来说&am…

php 匹配双字节字符串,收集一些常用的正则表达式(匹配中文字符、匹配双字节字符、匹配HTML标记、匹配空行 and so on~~~)...

正则表达式用于字符串处理,表单验证等场合,实用高效,但用到时总是不太把握,以致往往要上网查一番。我将一些常用的表达式收藏在这里,作备忘之用。本贴随时会更新,请持续关注本站。匹配中文字符的正则表达式…

nyist 17 -----记忆式搜索------Accept

//记忆式搜索 #include <iostream>#include<stdio.h>#include<string.h>using namespace std;char a[10002];int b[10002];int n,ans;int f(int x){ int i,t; if(b[x]>0) return b[x]; b[x]1; for(i0;i<x-1;i) { tf(i); if(a[i]<a[x] && b[…

双拓扑排序 HDOJ 5098 Smart Software Installer

题目传送门 1 /*2 双拓扑排序&#xff1a;抄的&#xff0c;以后来补3 详细解释&#xff1a;http://blog.csdn.net/u012774187/article/details/407369954 */5 #include <cstdio>6 #include <algorithm>7 #include <iostream>8 #include <sstream&…

asp.net matlab,ASP.NET与MATLAB混合编译以及数据传递【更新中】

本帖最后由 yinbo20081314 于 2015-5-20 00:35 编辑在VS环境的项目中&#xff0c;首先需要引用以下dll才能开启MATLAB混编。【引用1】MatlabApplication(Version 8.1) Type Library 1.0a1.jpg (42.85 KB, 下载次数: 9)2015-5-20 00:16 上传【引用2】在MATLAB安装地址下可以找到…

01背包 模板1 2 总结

物品质量 w[0] w[1] w[2] ....... w[n] 背包容量c T 物品价值 v[0] v[1] v[2] ....... v[n] 物品种类 n N &#xff08;一&#xff09;设DP(x,y) 表示 从前x项物品中 取出装入 体积为y的背包 的 物品的最…

Cling旨在提供一款高性能的C++ REPL

Cling是一款交互式C解释器&#xff0c;以LLVM和Clang为基础构建&#xff0c;其目标是通过超越编码-编译-运行-调试这个惯常的C工作流程提供生产力的飞跃。\\Cling提供了一个读取-求值-输出循环&#xff08;REPL&#xff09;&#xff0c;类似常见的Unix shell&#xff0c;并支持…

8月12号=》391页-395页

14.10  使用document对象 document对象既是HTMLDocument类的一个实例&#xff0c;也是DHTML模型中的一个对象。该对象除了可以使用标准DOM模型 的方法之外&#xff0c;还可以使用它如下几个常用方法。 close()&#xff1a;结束一个通过open方法打开的document对象。 open()&a…

matlab暂停音频,matlab 中的实时音频

matlab 中的实时音频音频系统工具箱™针对实时音频处理进行了优化. audioDeviceReader, audioDeviceWriter, audioPlayerRecorder,dsp.AudioFileReader 和 dsp.AudioFileWriter 器是为流式传输多通道音频而设计的, 它们提供了必要的参数, 以便您可以在吞吐量和延迟之间进行权衡…

js数组操作

2019独角兽企业重金招聘Python工程师标准>>> 1、数组的创建 var arrayObj new Array(); //创建一个数组 var arrayObj new Array([size]); //创建一个数组并指定长度&#xff0c;注意不是上限&#xff0c;是长度 var arrayObj new Array([element0[, element1[…

ubuntu php zip 安装教程,Ubuntu安装zip解压软件

如果没安装&#xff1a;C/C Code复制内容到剪贴板sudo apt-get install unzipsudo apt-get install zip或者&#xff1a;C/C Code复制内容到剪贴板yum install zipyum install unzip【解压.zip文件】Ubuntu中貌似已经安装了unzip软件&#xff0c;解压命令如下&#xff1a;PHP C…

[hackerrank]Manasa and Stones

https://www.hackerrank.com/contests/w2/challenges/manasa-and-stones 简单题。 #include<iostream> using namespace std;int main() {int T;cin >> T;while (T--) {int n, a, b;cin >> n >> a >> b;// a < bif ( a > b) {int tmp a;a…

PHP--字符串处理函数

字符串的声明 1、 2、 3、 【注】单引号与双引号声明字符串的区别&#xff1a; 1、strlen():获取字符串长度 2、substr():截取字符串 3、strpos():查找字符串在指定字符串中的位置 4、str_replace():字符串替换 字符串与数组的转化函数 1、explode():字符串转化为数组 2、implo…

vue php 文件上传,使用vue.js和laravel上传文件

我尝试在vue.js和laravel中上传pdf文件&#xff0c;files_array是这样定义的:data(){return {formData: new Form ({files_array:,...这是一个文件选择函数:selectFile(e) {let pdfFile e.target.files[0];this.formData.files_array pdfFile;}上传功能:const header {Conten…

用webstorm自动编译less产出css和sourcemap

css产出sourcemap有什么用呢&#xff0c;可能大家要问这个问题了。 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hlzh-CN 在chrome中我们通过sourcemap可以直接调试less源文件文件&#xff0c;这是一个非常强大的功能。 下面由我…

远近旋转球体

2019独角兽企业重金招聘Python工程师标准>>> static int day 20; void mydisplay(void) {int a clock();glEnable(GL_DEPTH_TEST);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);//清空颜色缓存与深度缓存glMatrixMode(GL_PROJECTION);//接下来要进行的操作…

matlab里数组的赋值,arrays – MATLAB结构赋值数组

我有一系列结构.让我们说s(1).value,…,s(5).value.我有一个值向量,让我们说vals [1 2 3 4 5],我想分配给结构数组.所以用伪代码写我想要&#xff1a;s(:).value vals.如下所示,有一个已知的解决方案.但是真的不可能像在伪代码中那样在1行中进行这个赋值吗&#xff1f;% Vect…

Linux(CentOS)挂载NTFS格式的U盘、移动硬盘

以下操作均在root下执行的 1.U盘挂载 mkdir /mnt/usb //创建一个目录&#xff0c;用于挂载U盘 fdisk -l //查看系统中挂载的U盘&#xff0c;若系统有一块硬盘sdb1 代表你的U盘&#xff0c;/dev/sdb1表明机 器已识别U盘&#xff0c; mount /dev/sdb1 /mnt/usb //把U盘/dev/sdb1挂…

iOS开发UI篇—CALayer简介

一、简单介绍在iOS中&#xff0c;你能看得见摸得着的东西基本上都是UIView&#xff0c;比如一个按钮、一个文本标签、一个文本输入框、一个图标等等&#xff0c;这些都是UIView。 其实UIView之所以能显示在屏幕上&#xff0c;完全是因为它内部的一个图层&#xff0c;在创建UIVi…