当前博客：34-快码FOF中文编程layui教学-组件：分页组件

342 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

分页是每个网站都需要用的组件之一，它可以让列表数据显示的更加优雅，通过分页切换不同页的数据。

layui内置的分页组件，我感觉可以满足大部分开发者的需求。

简单分页代码示例：

<区块 id="演示1"></区块>
<脚本>
新建对象 lay_分页({
    	[lay_分页.配置.绑定元素]: "#演示1",
    	[lay_分页.配置.总数]: 50,
    	[lay_分页.配置.跳转]: 定义函数 (分页跳转对象, 首次) {
    		如果 (!首次) {
    			lay_弹出层.消息框("跳转到第" + 分页跳转对象[lay_分页.配置.起始页] + "页,每页" + 分页跳转对象[lay_分页.配置.条数] + "条");
    			// 请求数据......
    			// 渲染数据......
    		}
    	},
    });
</脚本>

代码效果展示：

下面是完整参数示例：

<区块 id="演示2"></区块>
<脚本>
	新建对象 lay_分页({
		[lay_分页.配置.绑定元素]: "#演示2",
		[lay_分页.配置.总数]: 100,
		[lay_分页.配置.条数]: 10,
		[lay_分页.配置.条数选择]: [10, 15, 20, 25, 30],//选择每页的条数
		[lay_分页.配置.起始页]: 2,
		[lay_分页.配置.分组]: 6,
		[lay_分页.配置.上一页]: "<",
		[lay_分页.配置.下一页]: ">",
		[lay_分页.配置.首页]: "首页",
		[lay_分页.配置.尾页]: "尾页",
		[lay_分页.配置.布局]: [lay_分页.布局.刷新, lay_分页.布局.上一页, lay_分页.布局.分页, lay_分页.布局.下一页, lay_分页.布局.跳页, lay_分页.布局.条数, lay_分页.布局.总数],//可自定义需要的板块
		[lay_分页.配置.主题]: "#c00", //“#颜色值”或者类名 “***”，生成类名 “layui-laypage-***”。
		[lay_分页.配置.哈希]: "page", // 地址栏追加  #!page=当前页
		[lay_分页.配置.跳转]: 定义函数 (分页跳转对象, 首次) {
			如果 (!首次) {
				lay_弹出层.消息框("跳转到第" + 分页跳转对象[lay_分页.配置.起始页] + "页,每页" + 分页跳转对象[lay_分页.配置.条数] + "条");
				// 请求数据......
				// 渲染数据......
			}
		},
	});
</脚本>

代码效果展示：