013-分页模块

1. layPage致力于提供极致的分页逻辑, 既可轻松胜任异步分页, 也可作为页面刷新式分页。

2. 基础参数选项

2.1. 通过核心方法: laypage.render(options)来设置基础参数。

3. 快速使用

3.1. laypage的使用非常简单, 指向一个用于存放分页的容器, 通过服务端得到一些初始值, 即可完成分页渲染:

<div id="test1"></div>

<script type="text/javascript">
	layui.use('laypage', function(){
		var laypage = layui.laypage;

  		// 执行一个laypage实例
	  	laypage.render({
	    	elem: 'test1' // 注意, 这里的test1是ID, 不用加#号
	    	,count: 500 // 数据总数, 从服务端得到
	  	});
 	});
</script>

4. jump - 切换分页的回调

4.1. 当分页被切换时触发, 函数返回两个参数: obj(当前分页的所有选项值)、first(是否首次, 一般用于初始加载的判断):

<div id="test1"></div>

<script type="text/javascript">
	layui.use('laypage', function(){
		var laypage = layui.laypage;

  		// 执行一个laypage实例
	  	laypage.render({
	    	elem: 'test1' // 注意, 这里的test1是ID, 不用加#号
	    	,count: 500 // 数据总数, 从服务端得到
	    	,jump: function(obj, first){
			    // obj包含了当前分页的所有参数, 比如：
			    console.log(obj.curr); // 得到当前页, 以便向服务端请求对应页的数据。
			    console.log(obj.limit); // 得到每页显示的条数
			    
			    // 首次不执行
			    if(!first){
			      // do something
			    }
		  	}
	  	});
 	});
</script>

5. 例子

5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>分页 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div id="test1"></div>

		<script type="text/javascript">
			layui.use('laypage', function(){
  				var laypage = layui.laypage;
  
		  		// 执行一个laypage实例
			  	laypage.render({
			    	elem: 'test1' // 注意, 这里的test1是ID, 不用加#号
			    	,count: 500 // 数据总数, 从服务端得到
			    	,limit: 20
			    	,limits: [10, 20, 30, 40, 50]
			    	,groups: 5
			    	,prev: '上一页'
			    	,next: '下一页'
			    	,first: '首页'
			    	,last: '尾页'
			    	,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
			    	,theme: '#c00' 
			    	,curr: location.hash.replace('#!fenye=', '') // 获取起始页
			    	,hash: 'fenye'
			    	,jump: function(obj, first){
					    // obj包含了当前分页的所有参数, 比如：
					    console.log(obj.curr); // 得到当前页, 以便向服务端请求对应页的数据。
					    console.log(obj.limit); // 得到每页显示的条数
					    
					    // 首次不执行
					    if(!first){
					      // do something
					    }
				  	}
			  	});
		 	});
		</script>
	</body>
</html>

5.2. 效果图

猜你喜欢