layui的分页实例详解

layui的分页实例详解

layui分页官方地址:https://www.layui.com/doc/modules/laypage.html

第一步 页面引入layui的css和js
这不就不用演示了吧


第二步 在html中写入样式
在这里插入图片描述


第三步 写js代码
在这里插入图片描述
目前就是简单的把分页样式写在了js代码中
theme就是给分页自定义颜色或者加一个类名从而改变分页样式
详见layui官网


第四步 ajax控制分页
ajax中data要传的数据
在这里插入图片描述
在layui调用中添加 jump
在这里插入图片描述

jump就是 点击上一页或者下一页触发函数自身

if (!first) {
}
的作用就是设置首次渲染分页无需走业务逻辑处理函数,不然会陷入死循环

我一开始看的时候也一脸懵逼 这样怎么实现页面跳转 怎么得到当前页
然后我打印了一下函数中的obj就明白了
在这里插入图片描述
在obj中已经得到了总数据条数和当前页
点击下一页的时候 curr就是变成2
如果当前页是2 点击上一页的时候 curr就会变成1

把obj.curr赋值给已经定义好的当前页变量 当成参数 详见第四步 ajax中data要传入的数据
最后在重新调用一下渲染列表的函数就完成了分页


### Layui 框架函数用法概述 Layui 是一个基于 JavaScript 的前端 UI 框架,专注于简化 Web 开发流程并提供丰富的组件支持。以下是关于其核心功能和常见模块的详细介绍: #### 1. 基本引入方式 为了使用 Layui 提供的功能,需先正确加载框架文件。通常情况下,在 HTML 文件中通过 `<script>` 和 `<link>` 标签来引入所需的 CSS 和 JS 文件[^4]。 ```html <link rel="stylesheet" href="/path/to/layui/css/layui.css"> <script src="/path/to/layui/layui.js"></script> ``` #### 2. 初始化模块 Layui 使用模块化设计,开发者可以通过 `layui.use()` 方法初始化所需模块。例如,要加载表单验证模块和弹窗提示模块,可按如下方式进行配置[^5]: ```javascript layui.use(['form', 'layer'], function() { var form = layui.form; // 获取表单模块实例 var layer = layui.layer; // 获取弹窗模块实例 // 表单提交事件监听器 form.on('submit(demo)', function(data){ console.log(data.field); // 打印表单字段数据 return false; // 阻止默认提交行为 }); }); ``` #### 3. 组件详解 Layui 提供了许多实用的组件,下面列举几个常用组件及其基本用法: ##### (1) 弹层组件 Layer 用于创建对话框、消息提醒等功能。以下是一个简单的例子展示如何显示一条通知信息[^6]: ```javascript layui.use('layer', function(){ var layer = layui.layer; // 显示成功提示 layer.msg('操作成功!', {icon: 1, time: 2000}); }); ``` ##### (2) 表格组件 Table 表格组件适用于复杂的数据展示场景。这里给出一段代码片段说明动态渲染表格内容的方法[^7]: ```javascript layui.use('table', function(){ var table = layui.table; // 渲染表格 table.render({ elem: '#test-table', url:'/server/data/', // 数据接口地址 cols: [[ // 定义列结构 {field:'id', title:'ID'}, {field:'username', title:'用户名'} ]], page:true // 启用分页 }); }); ``` #### 4. 错误处理机制 如果应用程序启动失败,并报告类似于“The application has failed to start because its side-by-side configuration is incorrect.”这样的错误,则可能是由于运行环境缺少必要的依赖库或者版本冲突引起的[^8]。此时建议检查系统的日志记录或利用命令行工具 `sxstrace.exe` 进一步诊断具体原因。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值