简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
首页 > web前端 > js教程 > 正文

LayUI实现前端分页功能

小云云
发布： 2018-05-18 14:30:25
原创
5351 人浏览过

本文主要为大家带来一篇基于LayUI实现前端分页功能的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

一、LayUI介绍

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

下载后引入项目中。
登录后复制

二、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类，检测页面是否初始加载。非常有用，可避免无限刷新。

三、分页实现

在前端展示页面，代码如下：

登录后复制

分页效果如下：　　

相关推荐：

一个非常好用的前端分页js工具类

关于前端分页的10篇文章推荐

jQuery前端分页示例分享_jquery

以上是LayUI实现前端分页功能的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
layui 分页 功能
来源：php.cn
上一篇：详解asp.net core封装layui组件 下一篇：Layui前后台交互数据获取java实例分享
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
我的表单的数据不能识别，可以帮我看看是哪里出了问题吗 <div class="layadmin-user-login-boxlayadmin-user-login-bodylayui-form"> &l...
来自于 2023-10-08 09:31:17
0
2
122
请问老师有没有layui 的开发文档 请问老师有没有layui 的开发文档,layui 官网下架了
来自于 2023-02-27 12:16:24
0
1
384
TP6教程问题 按照教程做，但是拷贝的html显示和视频教程不一样，并且导入layui也没用
来自于 2022-01-17 10:36:36
0
2
780
html按教程拷贝进去，问题 html按教程拷贝进去，只一行一行显示文字，不是视频的显示格式，加载layui也加载不出
来自于 2022-01-17 10:31:03
0
1
707
layui加载不出 layui加载不出
来自于 2022-01-16 23:06:24
0
4
865
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！