JQ获取本地JSON文件中的数据 模拟分页效果 - 初学
2024-05-12 02:03:43
直接上代码
先上两段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; //当前页数;默认为首页：1let 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":"地球"}]
}JQ获取本地JSON文件中的数据 模拟分页效果 - 初学相关推荐
- vue获取本地php数据,Vue-cli项目获取本地json文件数据的实例
下面我就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助. 在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件 ...
- 获取本地json文件
方法一:vue中获取本地json文件 //通过json文件路径引入 import jsonData from './***.json' //定义一个变量用于接收数据 data() {return {c ...
- php把表单转为json保存,javascript – 使用jquery将表单数据保存到本地json文件中
我有一个带有一些输入字段的基本表单.我想在提交表单时将表单数据保存到json文件中. json文件中保存数据的格式应如下所示. [ {"title":"some text ...
- 将数据写入json文件，并且读取json文件中的数据
目录 一.将数据生成json文件 二.读取json文件中的数据 三.方法测试 四.其他附件 1.User实体类 2.import 一.将数据生成json文件 方法 /*** 生成.json格式文件*/ ...
- 动态获取本地json文件，渲染为表格-前端html+css+javascript，nth-child选择器，实时浏览插件，vscode，ajax
从本地获取到json文件,并进行动态的渲染demo来啦~ 此文章对table表格,nth-child()选择器,插入html标签做的小demo,大佬请绕道,感兴趣的uu可以安心"食用&quo ...
- Vue中怎样获取json文件中的数据
场景 访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据. json文件内容: 文件位置: 实现 musi ...
- android studio中存放json文件，获取assets文件下下文件，获取本地json文件并解析
转自http://blog.csdn.net/yanxiaosa/article/details/70859927 以前看过这些知识,今天用到的时候,发现自己忘记了,都不知道assets文件夹在哪个目 ...
- JavaScript中获取JSON文件中的数据
1.使用 Ajax 方式获取 $.get("json/test.json", function(data) { console.log(data.total); }); 1 2 3 ...
- 5.1 node实现简单注册功能(往json文件中写入数据)
5.1.1 描述: /* 描述:如果persons中没有对应的用户,则把user写入到persons.json中,提示注册成功并且不能修改原来的数据结构如果有对应的用户名,则提示用户名已经被占用 */ ...
- axios 获取本地json文件
安装axios 找到main.js文件配置axios import axios from 'axios' Vue.prototype.$axios = axios 将json文件放到public文件夹 ...
最新文章
- 信息学奥赛一本通（C++）在线评测系统——基础（一）C++语言—— 1054：三角形判断
- viper4android哪个版本好,VIPER4Android最新版本
- 如何去除Eclipse Maven插件里关于Managed version的警告消息
- ext get id js_【翻译】Ext JS最新技巧——2015-8-11
- android四周阴影效果_帮助独立开发者轻松创建令人惊叹的产品视觉效果
- Java中IO流，输入输出流概述与总结
- 【Flink】Flink使用withParameters(Configuration)传参
- Office 365 机器人（Bot）开发入门
- 【零基础学Java】—多线程（四十九）
- CUDA2.1-原理之索引与warp
- TCP协议与UDP协议的区别
- Vue-Less的自动和手动引入
- fpgrowth算法实战 mlib_MLlib--FPGrowth算法
- Linux内核网络udp数据包发送（一）
- 计算机端口25,在Windows 下关闭21\23\25端口的方法 -电脑资料
- Word页码从正文开始-请务必文档格式要规范,这在你未来的工作中的细节是很重要的
- C# linq的学习及使用
- MATLAB冒号用法
- 莫烦Python教程之Pandas教程
- 计算机组成认知的笔记1000字,[转载]笔记整理——认知负荷理论