Web_JavaScript_JS随记：分页组件；

最新推荐文章于 2022-05-19 01:20:35 发布

cyb_23

最新推荐文章于 2022-05-19 01:20:35 发布

阅读量672

点赞数

分类专栏： Web_JavaScript

本文链接：https://blog.csdn.net/cyb_23/article/details/51656561

版权

Web_JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

>效果

>代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>layPage_demo[JS_分页组件]</title>
	<meta name="keywords" content="分页插件,ajax分页,异步分页">
	<meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！">
</head>
<body>
	<!-- 数据显示 容器 -->
	<ul id="ul_city_list"></ul>
	<!-- 分页组件 容器 -->
	<div id="div_city"></div>
	<div style="width:800px; margin:100px 0 0; font-size:14px;">
		<p>使用方法：把laypage整个目录放入你的项目，只需引入laypage.js即可，其它一律无视。</p>
		<p>详细文档打开demo，或者直接进入官网：<a href="http://laypage.layui.com">http://laypage.layui.com</a></p>
	</div>
	<script src="laypage/laypage.js"></script>
	<script>
		//测试数据[数组_37]；
		var data = [
			'北京',
			'上海',
			'广州',
			'深圳',
			'杭州',
			'长沙',
			'合肥',
			'宁夏',
			'成都',
			'西安',
			'南昌',
			'上饶',
			'沈阳',
			'济南',
			'厦门',
			'福州',
			'九江',
			'宜春',
			'赣州',
			'宁波',
			'绍兴',
			'无锡',
			'苏州',
			'徐州',
			'东莞',
			'佛山',
			'中山',
			'成都',
			'武汉',
			'青岛',
			'天津',
			'重庆',
			'南京',
			'九江',
			'香港',
			'澳门',
			'台北'
		];
		var nums = 5; //每页数量；
		var pages = Math.ceil(data.length/nums); //总页数量[8]；
		var thisDate = function(curr){ //curr当前页；thisDate当页数据；
			//此处只是演示，实际场景通常是返回当前页已经分组好的数据；
			var str = '', last = curr * nums - 1;
			last = last >= data.length ? (data.length-1) : last; //最后下标；
			for(var i = (curr * nums - nums); i <= last; i++){
				str += '<li>'+ data[i] +'</li>';
			}
			return str;
		};
		//调用分页
		laypage({
			cont: 'div_city', //分页组件容器；
			pages: pages,
			jump: function(obj){
				document.getElementById('ul_city_list').innerHTML = thisDate(obj.curr);
			}
		});
	</script>
</body>
</html>