mirror of
https://github.com/layui/layui.git
synced 2026-02-09 02:09:18 +08:00
5ab142153b
* style: 统一代码格式，修复ESLint错误 - 为所有模块添加尾随逗号 - 修复缺少分号的语句 - 统一对象字面量格式 - 添加ESLint配置文件和文档 - 更新package.json中的脚本和依赖项 * build: 添加 ESLint 配置文件以支持 IE9+ 兼容性 * refactor(upload): 使用已缓存的hint实例替换直接调用 优化代码性能，避免重复实例化hint对象，直接使用模块顶部已缓存的实例 * chore: 更新.gitignore文件以包含更多忽略规则 添加了更多常见的临时文件、编辑器文件、构建输出目录和运行时数据的忽略规则，使项目更加整洁并避免不必要的文件被提交到版本控制中 * fix(lay.js): 修复passive事件监听器选项的返回值 确保getter函数返回true以正确支持passive事件监听 * refactor(form): 移除表单模块中的冗余代码 删除表单模块中无实际作用的冗余代码行，这些代码只是将属性重新赋值为自身，没有实际功能意义 * fix(form): 修复复选框状态处理逻辑 确保复选框的 indeterminate 和 checked 状态被正确转换为布尔值，并优化事件调用时的空格格式 * feat(eslint): 完善 ESLint 配置并添加 VSCode 支持 添加 VSCode 配置文件以支持 ESLint 自动修复和格式化 更新 ESLint 配置，增强代码风格和兼容性规则 修复 package.json 中的脚本拼写错误并添加 format 脚本 调整 .gitignore 以允许特定 VSCode 配置文件 * style: 统一代码中的引号格式并修复缩进问题 统一将双引号改为单引号，修复部分代码缩进不一致的问题，提升代码风格一致性 * docs: 删除过时的ESLint配置文档文件 * build: 采用 prettier 作为代码格式化工具，剔除 ESLint 格式化部分 * chore: 剔除 .vscode/ 配置，保持编辑器中立 * build: 修改 ESLint 为「扁平化配置」方式，避免大量参数堆砌 * chore: 格式化代码 * ci: 添加 git hooks 和 CI 环节把关代码风格 * ci: update * ci: update * test: 测试 ci format * ci: 改用 husky 作为 git hooks，与 Layui 3 保持一致 经测试，simple-git-hooks 生成的 pre-commit 默认为 sh，在 Windows 不兼容（必须用 git bash 执行 commits） * build: 新增 CI 和生产环境跳过 husky 安装的判断 * build: 剔除重复配置 * build: 优化 eslint 配置 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
207 lines
4.9 KiB
HTML
207 lines
4.9 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||
/>
|
||
<title>分页 - layui</title>
|
||
|
||
<link rel="stylesheet" href="../src/css/layui.css" />
|
||
|
||
<style>
|
||
body {
|
||
padding: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
总页数低于页码总数：
|
||
<div id="demo0"></div>
|
||
总页数大于页码总数：
|
||
<div id="demo1"></div>
|
||
自定义主题：
|
||
<div id="demo2"></div>
|
||
自定义首页、尾页、上一页、下一页文本：
|
||
<div id="demo3"></div>
|
||
不显示首页尾页：
|
||
<div id="demo4"></div>
|
||
开启HASH：
|
||
<div id="demo5"></div>
|
||
只显示上一页、下一页：
|
||
<div id="demo6"></div>
|
||
显示完整功能：
|
||
<div id="demo7"></div>
|
||
自定义排版：
|
||
<div id="demo8"></div>
|
||
|
||
<fieldset
|
||
class="layui-elem-field layui-field-title"
|
||
style="margin-top: 50px"
|
||
>
|
||
<legend>将一段已知数组分页展示</legend>
|
||
</fieldset>
|
||
|
||
<div id="demo9"></div>
|
||
|
||
<ul id="biuuu_city_list"></ul>
|
||
|
||
<script src="../src/layui.js"></script>
|
||
<script>
|
||
layui.use(['laypage', 'layer'], function () {
|
||
var laypage = layui.laypage,
|
||
layer = layui.layer;
|
||
|
||
//总页数低于页码总数
|
||
laypage.render({
|
||
elem: 'demo0',
|
||
count: 50 //数据总数
|
||
});
|
||
|
||
//总页数大于页码总数
|
||
laypage.render({
|
||
elem: 'demo1',
|
||
count: 70, //数据总数
|
||
jump: function (obj) {
|
||
console.log(obj);
|
||
}
|
||
});
|
||
|
||
//自定义样式
|
||
laypage.render({
|
||
elem: 'demo2',
|
||
count: 100,
|
||
theme: '#1E9FFF'
|
||
});
|
||
|
||
//自定义首页、尾页、上一页、下一页文本
|
||
laypage.render({
|
||
elem: 'demo3',
|
||
count: 100,
|
||
first: '首页',
|
||
last: '尾页',
|
||
prev: '<em>←</em>',
|
||
next: '<em>→</em>'
|
||
});
|
||
|
||
//不显示首页尾页
|
||
laypage.render({
|
||
elem: 'demo4',
|
||
count: 100,
|
||
first: false,
|
||
last: false
|
||
});
|
||
|
||
//开启HASH
|
||
laypage.render({
|
||
elem: 'demo5',
|
||
count: 500,
|
||
curr: location.hash.replace('#!fenye=', ''), //获取hash值为fenye的当前页
|
||
hash: 'fenye' //自定义hash值
|
||
});
|
||
|
||
//只显示上一页、下一页
|
||
laypage.render({
|
||
elem: 'demo6',
|
||
count: 50,
|
||
layout: ['prev', 'next'],
|
||
jump: function (obj, first) {
|
||
if (!first) {
|
||
layer.msg('第 ' + obj.curr + ' 页');
|
||
}
|
||
}
|
||
});
|
||
|
||
//完整功能
|
||
laypage.render({
|
||
elem: 'demo7',
|
||
count: 100,
|
||
//,groups: 0
|
||
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
|
||
/*,limitTemplet: function(item) {
|
||
return item + ' / page';
|
||
}*/
|
||
// ,skipText: ['Go to', '', 'Confirm']
|
||
jump: function (obj) {
|
||
console.log(obj);
|
||
}
|
||
});
|
||
|
||
//自定义排版
|
||
laypage.render({
|
||
elem: 'demo8',
|
||
count: 1000,
|
||
layout: ['limit', 'prev', 'page', 'next'],
|
||
//,limits: [100, 200, 300]
|
||
limit: 200
|
||
});
|
||
|
||
//将一段数组分页展示
|
||
|
||
//测试数据
|
||
var data = [
|
||
'北京',
|
||
'上海',
|
||
'广州',
|
||
'深圳',
|
||
'杭州',
|
||
'长沙',
|
||
'合肥',
|
||
'宁夏',
|
||
'成都',
|
||
'西安',
|
||
'南昌',
|
||
'上饶',
|
||
'沈阳',
|
||
'济南',
|
||
'厦门',
|
||
'福州',
|
||
'九江',
|
||
'宜春',
|
||
'赣州',
|
||
'宁波',
|
||
'绍兴',
|
||
'无锡',
|
||
'苏州',
|
||
'徐州',
|
||
'东莞',
|
||
'佛山',
|
||
'中山',
|
||
'成都',
|
||
'武汉',
|
||
'青岛',
|
||
'天津',
|
||
'重庆',
|
||
'南京',
|
||
'九江',
|
||
'香港',
|
||
'澳门',
|
||
'台北'
|
||
];
|
||
|
||
//调用分页
|
||
laypage.render({
|
||
elem: 'demo9',
|
||
count: data.length,
|
||
layout: ['prev', 'page', 'next', 'refresh', 'skip'],
|
||
jump: function (obj) {
|
||
//模拟渲染
|
||
document.getElementById('biuuu_city_list').innerHTML =
|
||
(function () {
|
||
var arr = [],
|
||
thisData = data
|
||
.concat()
|
||
.splice(obj.curr * obj.limit - obj.limit, obj.limit);
|
||
layui.each(thisData, function (index, item) {
|
||
arr.push('<li>' + item + '</li>');
|
||
});
|
||
return arr.join('');
|
||
})();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|