layui的分页怎么用

layui是一个非常实用的前端开发库,利用它我们可以方便,简单的创建各种美观的前端ui,下面我们就来简单来看一个常用的分页组件,是怎样用layui来完成的,几行代码就行了。

layui的分页怎么用

方法/步骤

首先我们需要引入lay对应的脚本文件和样式文件。

https://cdn.chuangxiangniao.com/2025/03/20250315202445298.jpg

在Html里,我们只需要创建一个空的div来生成分页组件就行了,为这个div提供一个id。

1562807333(1).png

在js脚本代码上,我们先生成一个laypage的分页组件实例对象。

1562807345(1).png

然后调用这个对象的render方法来渲染出分页的各个元素。

render方法里,我们传入一个对象,elem就是div的id。

count是用来指示分页的对象一共有多少条数据。

1562807362(1).png

运行这样的代码,我们就可以看到这个渲染出来的分页了,很简单的代码,就得到了一个漂亮的分页了。

1562807377(1).png

相关推荐:《layui框架教程》

从上面的数据我们可以看到,默认情况下是一页包含10条数据的。

当然这个我们也是可以配置的,提供limit参数就行了,我们这里设置为4。

1562807389(1).png

重新刷新页面,可以看到,20条数据,每页4行数据,可以看到现在就共分为5页了。

https://cdn.chuangxiangniao.com/2025/03/20250315202501983.png

分页控件里,一个很重要的功能是需要交互,就是说点击了某一页后,需要显示对应页的数据。

因此组件提供了一个jump的方法来交互,这个方法里,会传过来一个参数obj,这个obj我们可以得到一些常用的数据,比如obj.cur,得到的是当前的页码。

obj.limit可以得到每一页包含的数据数目。

https://cdn.chuangxiangniao.com/2025/03/20250315202501877.jpg

1562807426(1).png

以上就是layui的分页怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3006777.html

(0)
上一篇 2025年3月13日 01:14:45
下一篇 2025年3月7日 10:44:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • layui的文件上传功能怎么获取文件名

    第一步在我们的电脑上面打开软件,新建一个html页面,并添加上layui插件的css,js文件和jquery.js文件,如下图所示: 第二步在新建的index1.html文件里面首先引入layui.css,layui.js,jquery-1…

    2025年3月13日 编程技术
    200
  • layui怎么设置checkbox勾选

    方法1 在返回的json中设置LAY_CHECKED为true,页面上的checkbox就是选中状态了。 data”:[    {“name”:”北京市”,”areaType”:”省/直辖市”,”id”:”110000″,”LAY_CHEC…

    2025年3月13日
    200
  • layui怎么对弹出层显示数据

    layui怎么对弹出层显示数据?下面给大家举个例子: 点击查看function func11() {  console.log($.cookie(“id”));  //iframe窗  layer.open({   type: 2,   t…

    2025年3月13日
    200
  • layui和easyui有什么区别

    layui layui是一款采用自身模块规范编写的前端 UI 框架,它遵循原生的 HTML/CSS/JS 书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到 API 都非常适合界面的快速开发。事实上layui更多是面向于后…

    2025年3月13日
    200
  • layui表格怎么清空

    监听复选框事件: var checkedArr=[];table.on(‘checkbox(demo)’, function(obj){if (obj.type==’all’) 。 登录后复制 输入代码: return;if (obj.ch…

    2025年3月13日 编程技术
    200
  • layui怎么设置复选框

    首先需要引入layui的js脚本文件,和css样式文件。需要使用jquery的,也引入对应文件。 html里,我们写上对应的复选框控件,就是平时常用的checkbox。但这里需要注意的是checkbox要加一个title值,而且控件要放在样…

    2025年3月13日 编程技术
    200
  • layui有什么主要功能

    一、分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能。下面就看一下我对layui框架分页的介绍。 注意:传入的是页数不是数据库查询的条数 laypage的使用;  //界面容器     …

    2025年3月13日
    200
  • layui icon是什么

    字体图标 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜…

    2025年3月13日 编程技术
    200
  • layui上传图片成功之后怎么预览成功的图片

    首先要会使用layui的写法,如图所示,提交之后有三个状态,一个上传中,一般文件大就会在这步显示,第三步就是报错,第二步是最主要的上传成功之后一系列的操作。 在控制器中自己写方法把获取到的图片传到服务器,之后判断一下是否成功上传,定义一些值…

    2025年3月13日 编程技术
    200
  • 使用layui怎么下载文件

    下载: a标签中的href属性可以直接给下载链接的地址,点击的时候会自动跳出下载保存窗口。 用原生上传文件标签上传文件,获取上传文件的全路径: $(‘#file’).change(function(){    $(‘#em’).text($…

    2025年3月13日
    200

发表回复

登录后才能评论