Web_JavaScript_JS随记:分页组件;

>效果


>代码

<!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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值