JQ获取本地JSON文件中的数据 模拟分页效果 - 初学

于 2018-07-20 15:14:19 发布
阅读量2.7k 收藏 2
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42211093/article/details/81132716
版权

直接上代码 

先上两段css样式

//dropload样式
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
//register样式
*{
	margin:0;padding:0;
}
body{
	background:black;
	color:rgb(255,216,96);
	/*color:black;*/
	/*background:#f2f2f2;*/
}
input{
	background:none;  
	/*outline:none;  */
	/*border:0px;*/
}
.xx2{
	background:black;
}
header:after,.xx:after{
	display: block;
	content: '';
	clear:both;
}
header{
	position: fixed;
	width:100%;
	top:0;
	margin:0 0 50px 0;
	background: rgb(255,216,96);
	color:white;
	text-align: left;
}
header span{
	height:100%;
	font-size: 1.7rem;
	color:black;
}
header .glyphicon{
	top:15px;
	font-size: 2.4rem;
}
header p{
	margin:0;
	line-height: 50px;
	font-size: 1.6rem;
}
.tip{
	/*background:white;*/
	line-height: 45px;
	margin:10px 0;
	color:rgb(255,216,96);
	font-size: 1.5rem;
}
main{
	/*position: absolute;*/
	/*top:10%;*/
	width:100%;
	/*background: white;*/

}
label{
	text-align: left;
	/*line-height: 20px;*/
}
.xx{
	box-sizing: border-box;
	position: relative;
	width:100%;
	padding:12px 0;
	/*border-bottom:1px solid #ccc;*/
	/*margin:22px  0;*/
}
.xx .form-control{
	width: 58%;
}
.xx .error{
	width:100%;
	display: none;
	position: absolute;
    top: 34px;
    left: 10px;
    color:darkred;
    font-size: 1.1rem;
}
.xx .success{
	display: none;
	position:absolute;
	top:10px;right:-15px;
	color:#5cb85c;
}
.buttons{
	margin: 20px 0 0 0;
}
.buttons button{
	background:rgb(255,216,96);
	color:white;
}
.verification-code{
	margin:10px 0 0 0;
	float:right;
}
.verification-code button{
	border:1px solid #ccc;
	background:rgb(255,216,96);
	color:black;
}
.verification-code:after{
	display: block;
	content:'';
	clear:both;
}

这个分页是移动端，按钮形式的。。。上滑加载做了一半，效果不是很好，还是按钮操作起来顺畅

<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/dropload.css">
<!-- <link rel="stylesheet" type="text/css" href="css/layer.css"> -->
<link rel="stylesheet" type="text/css" href="./css/register.css">
<style type="text/css">
	main{
		position:relative;
	}
	.xx{
		padding:0;
	}
	.xx1{
		background: green;
	}
	.hollyshit{
		max-height:1300px;
		/*overflow: hidden;*/
	}
	.hollyshit tr{
		height:30px;
	}
	.wqe{
		background: orange;
		color:white;
	}

</style>
</head>
<body>
<div class="xx">
	<header>
		<span class="glyphicon glyphicon-chevron-left col-xs-5"></span>
		<p class="col-xs-7">注册</p>
	</header>
	<main class="container-fluid" id="test">
		<div class="ajaxcontent">
    		<!-- <xx v-for="list in lists"  :list="list" ></xx>
    		<div class="btn btn-success" @click="addpre">点我啊</div>
    		<div class="btn btn-success">我是第{{page}}页</div>
    		<div class="btn btn-success" @click="add">点我啊</div>
    		<input type="number" name="" v-model="num">你想一次显示几个东西
    		<input type="number" name="" v-model="page" >
    		<div class="btn btn-success" @click="jump">跳转</div>
    		<div>共有{{count}}页</div> -->

    	</div>
    	<div class="btn btn-success pre" @click="addpre">点我啊</div>
    		<div class="btn btn-success nowpage">我是第1页</div>
    		<div class="btn btn-success next" >点我啊</div>
    		<input type="number" name="jump" v-model="page" >
    		<div class="btn btn-success jump"  @click="jump">跳转</div>
    		<div class="count"></div>
    		<div class="btn btn-success all">显示全部</div>
    	<p></p>
    	{{show}}
    	<table class="hollyshit">
    		
    	</table>
	</main>
</div>	



</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<!-- <script src="./js/vue.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> -->
<script src="./js/layer.js"></script>
<!-- <script src="./js/register.js"></script> -->

</html>
<script type="text/javascript" src="./js/dropload.min.js"></script>
<script type="text/javascript">
$(function(){
	let reslength=0;     // 每页显示数据的最大下标
	let i=0;
	let j=0;
	let num=3;       //每页显示数量
	let page=1;		 //当前页数;默认为首页：1
	let count='';
	let com = '';      //总页数
	init();
	function init(){
		$.ajax({
			url:'test.json',
			methods:'get',
			async:false,
			datatype:'json',
			success:function(data){
				com = '';
				let res = eval("("+data+")");  //设置dataType无效的措施：用eval把返回数据从string变为object，可通过typeof（data）判断返回类型
				count = res.list.length/num;
				reslength = (reslength<=res.list.length)?page*num:res.list.length;        //首页内容限制固定为0-num；
				i = reslength - num;
				for(i;i<reslength;i++){
					com += '<div class="box" >'
					+	        '<div class="merchants-img col-xs-4"><img></div>'
					+	        '<div class="merchants-content col-xs-8">'
					+	        '<p>'+res.list[i].id+'</p>'
					+	            '<p class="title">'+res.list[i].title+'</p><span class="dizhi">距离:'+res.list[i].distance+'<i class="glyphicon glyphicon-map-marker"></i></span>'
					+	            '<p class="tel">联系电话:'+res.list[i].tel+'</p>'
					+	            '<p class="adress">我们的地址:'+res.list[i].adress+'</p>'
					+	       ' </div>'
					+    	'</div>'
				}
				console.log(com);
				$('.ajaxcontent').html(com);
				count = res.list.length/num;
				$('.count').html('共有'+count+'页');
				return (page,count);
			},
			error:function(err){
				console.log(err);
			}
		})
	}
	
	$('.next').click(function(){
		com='';
		$.ajax({
			url:'test.json',
			type:'get',
			datatype:'json',
			async:false,
			success:function(data){
				let res = eval("("+data+")");
				if(page >= res.list.length/num){
					layer.open({
					    content: '无更多数据',
					    skin: 'msg',
					    time: 2 //2秒后自动关闭
					  });
					return;
				}
				page++;
				reslength = (reslength<res.list.length)?page*num:res.list.length;
				i = reslength - num;
				// console.log(i);
				for(i;i<reslength;i++){
					com += '<div class="box" >'
					+	        '<div class="merchants-img col-xs-4"><img></div>'
					+	        '<div class="merchants-content col-xs-8">'
					+	        '<p>'+res.list[i].id+'</p>'
					+	            '<p class="title">'+res.list[i].title+'</p><span class="dizhi">距离:'+res.list[i].distance+'<i class="glyphicon glyphicon-map-marker"></i></span>'
					+	            '<p class="tel">联系电话:'+res.list[i].tel+'</p>'
					+	            '<p class="adress">我们的地址:'+res.list[i].adress+'</p>'
					+	       ' </div>'
					+    	'</div>'
				}
				$('.ajaxcontent').html(com);
				// $('.ajaxcontent').append(com);
				let nowpage = reslength/num;
				$('.nowpage').html('我是第'+nowpage+'页');
				console.log('当前第'+page+'页');
				
			},
			error:function(error){
				alert(error);
			}
		})
	});
	$('.pre').click(function(){
		com='';
		$.ajax({
			url:'test.json',
			type:'get',
			datatype:'json',
			success:function(data){
				let res = eval("("+data+")");
				page = (page>0)?page-=1:1;
				if(page == 0){
					layer.open({
						content:'已经是第一页了',
						skin: 'msg',
					    time: 2 //2秒后自动关闭
					})
					page = 1;
					return;
				}
				console.log(page);

				// page--;
				reslength = (page>1)?page*num:num;
				i = reslength-num;
				for(i;i<reslength;i++){
					com += '<div class="box" >'
					+	        '<div class="merchants-img col-xs-4"><img></div>'
					+	        '<div class="merchants-content col-xs-8">'
					+	        '<p>'+res.list[i].id+'</p>'
					+	            '<p class="title">'+res.list[i].title+'</p><span class="dizhi">距离:'+res.list[i].distance+'<i class="glyphicon glyphicon-map-marker"></i></span>'
					+	            '<p class="tel">联系电话:'+res.list[i].tel+'</p>'
					+	            '<p class="adress">我们的地址:'+res.list[i].adress+'</p>'
					+	       ' </div>'
					+    	'</div>'
				};
				$('.ajaxcontent').html(com);
				let nowpage = reslength/num;
				$('.nowpage').html('我是第'+nowpage+'页');
				console.log('当前第'+page+'页');

			},
			error:function(error){
				alert(error);
			}
		})
	});
	$('.jump').click(function(){
		let jumpnum = $('input[name="jump"]').val();
		console.log(jumpnum);
		if(jumpnum>count){
			layer.open({
				content: '看下面一共多少页你再填',
			    skin: 'msg',
			    time: 2 //2秒后自动关闭
			})
			return;
		}
		page = jumpnum;
		init();
	})
	$('.all').click(function(){
		$.ajax({
			url:'test.json',
			methods:'get',
			async:false,
			datatype:'json',
			success:function(data){
				com = '';
				let res = eval("("+data+")");  //设置dataType无效的措施：用eval把返回数据从string变为object，可通过typeof（data）判断返回类型
				reslength =res.list.length;        //首页内容限制固定为0-num；
				i = 0;
				for(i;i<reslength;i++){
					com += '<div class="box" >'
					+	        '<div class="merchants-img col-xs-4"><img></div>'
					+	        '<div class="merchants-content col-xs-8">'
					+	        '<p>'+res.list[i].id+'</p>'
					+	            '<p class="title">'+res.list[i].title+'</p><span class="dizhi">距离:'+res.list[i].distance+'<i class="glyphicon glyphicon-map-marker"></i></span>'
					+	            '<p class="tel">联系电话:'+res.list[i].tel+'</p>'
					+	            '<p class="adress">我们的地址:'+res.list[i].adress+'</p>'
					+	       ' </div>'
					+    	'</div>'
				}
				console.log(com);
				$('.ajaxcontent').html(com);
				count = 1;
				$('.count').html('共有'+count+'页');
				return (page,count);
			},
			error:function(err){
				console.log(err);
			}
		})
	})
	// let startY=0,endY=0,distance=0;
	// $('main').on('touchstart',function(e){
	// 	startY = e.originalEvent.changedTouches[0].pageY;
	// });
	// $('main').on('touchmove',function(e){
	// 	endY = e.originalEvent.changedTouches[0].pageY;
	// 	distance = endY - startY;
	// 	$('main').css({"top":distance+'px'});
	// 	// console.log($('.main'));
	// })
	// $('main').on('touchend',function(e){
	// 	console.log('结束');
	// 	endY = e.originalEvent.changedTouches[0].pageY;
	// 	$('main').animate({"top":0},"slow");
	// 	// var h = $(document).height()-$(window).height();
//  //          $(document).scrollTop(h); 
	// 	if(distance<0){
	// 		$('.next').click();
	// 	}
		
	// 	console.log(distance);
	// });
		
				
	
})
</script>

 这是我本地的JSON文件

{
  "list":[
    {"id":"1","title":"哈哈","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"2","title":"你猜我是谁","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"3","title":"我不猜","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"4","title":"你愁啥","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"5","title":"瞅你咋地","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"6","title":"天杀星","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"7","title":"天火","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"8","title":"哈哈2","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"9","title":"天宫","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"10","title":"泵哈哈","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"11","title":"哈撒给","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"12","title":"狂风绝息斩","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"13","title":"踏风斩","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"14","title":"哈哈3","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"15","title":"割喉之战","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"16","title":"哈哈1","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"17","title":"雷霆战","distance":"128m","tel":"15014652534","adress":"地球"},
    {"id":"18","title":"哈哈3","distance":"128m","tel":"15014652534","adress":"地球"}

    
  ]
}

 

冷暖自知
关注
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值