热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

基于LayUI实现前端分页功能的方法

下面小编就为大家带来一篇基于LayUI实现前端分页功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、LayUI介绍

Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。内置了一些常用元素和组件的UI框架。

下载地址为http://www.layui.com/,下载后引入项目中。


二、LayPage参数介绍

laypage是内置封装好的一个对象,在进行分页的时候直接调用即可,这里主要有以下几个参数,用于配置laypage的键值对集合:

默认值

类型

描述

cont

必填

String/Object

容器。值可以传入元素id或原生DOM或jquery对象

pages

必填

Number

分页数

curr

1

Number

当前页。

groups

5

Number

连续分页数。

skin

default

String

控制分页皮肤

first

1

Number/String/Boolean

用于控制首页。first: false,则表示不显示首页项

last

总页数值

Number/String/Boolean

用于控制尾页。last: false,则表示不显示尾页项

prev

上一页

String/Boolean

用于控制上一页。若不显示,设置false即可

next

下一页

String/Boolean

用于控制下一页。若不显示,设置false即可

jump

核心参数

Function

触发分页后的回调,函数返回两个参数。
obj是一个object类型。包括了分页的所有配置信息。
first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。

三、分页实现

在前端展示页面,代码如下:


分页效果如下:  

以上这篇基于LayUI实现前端分页功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • Div+CSS网站布局入门教程(转载)
    在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等设置div的宽度。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学 ... [详细]
  • SpringMvc组件初始化
    SpringMVC9大组件初始化由上面的断点流程,可以看出来其实是在spring容器初始化完成的最后一步,通过发送event事件@Overridepublicvoidpublish ... [详细]
  • 微信html替换右键菜单,jquery右键菜单
    插件描述:一个最简单的,很好看的jQuery右键菜单一个最简单的,很好看的jQuery右键菜单特点唯一的依赖是jQuery。简单的API。 ... [详细]
  • Sequence.js适合电子商务网站的图片滑块
    Sequence.js是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能。带有图片缩率图,能够呈现全屏图片浏览效果。结合CSS3Tr ... [详细]
  • 一、Web前端技术HTML:HTML、HTML5、CSS、TCPIPXML:XMLWeb脚本:JavaScript、AJAX、jQuery、JSONServ脚本:JSP、APS、P ... [详细]
  • JS swiper轮播图完美兼容手机端
    swiper ... [详细]
  • Forexamplewehavefollowingcode:$(el).hide()el.style.display'none'$(el).forEach((){ ... [详细]
  • 【二食堂】AlphaScrum Meeting 4
    ScrumMeeting3例会时间:4.1312:0012:30进度情况|组员|昨日进度|今日任务||||||李健|1.主页面的搭建工作issue|1.完成主页搭建2.与后端协商确 ... [详细]
  • 基于name-based基于IP基于port结合一、基于名称(name-based)需要配置hosts,httpd.conf实验环境需求:2个域名:www1.example.com ... [详细]
  • ECMAScript 6 模板字面量的常见用法
    模板字面量可以理解成是字符串的一种,形式上用反引号将内容括起来。目录特点一:模板字面量会保留反引号内部的空格、回车、tab,会将\n,\t翻译。特 ... [详细]
  • Window对象是所有客户端JavaScript特性和API的主要接入点。它表示Web浏览器的一个窗口或窗体,并且可以用标识符window来引用它。Window对象定 ... [详细]
  • CSS深入剖析text和column
    这里写目录标题一、text-shadow二、font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似,这里通过 ... [详细]
  • KotlinDSL,指用Kotlin写的DomainSpecificLanguage.本文通过解析官方的KotlinDSL写html的例子,来说明KotlinDSL是什么.首 ... [详细]
  • js中的toggle函数的具体使用方法切换效果示例
    web前端|js教程toggle点击事件切换web前端-js教程本篇文章主要给大家介绍下jQuery函数toggle点击事件切换是如何操作的。首先大家需要了解一下;toggle() ... [详细]
  • Hashtable和HashMap之间的区别Hashtable是继承了Dictionary,是线程安全的。HashMap实现了Map接口,不是线程安全的 ... [详细]
author-avatar
双鱼2502858483
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有