ajax+分页

发布时间：2023-09-06 01:12责任编辑：蔡小小关键词：暂无标签

<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<meta name="renderer" content="webkit"/>
<title>测试副本</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<style type="text/css">
#pagecount{
???text-align: center;
???padding: 20px 0;
}
.turn-go{
???text-align: center;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="app">
???<table class="table table-border">
???????<thead>
???????????<tr>
???????????????<th>aId</th>
???????????????<th>cId</th>
???????????????<th>developer</th>
???????????????<th>download</th>
???????????????<th>icon</th> ?
???????????????<th>name</th>
???????????????<th>orders</th>
???????????????<th>price</th>
???????????</tr>
???????</thead>
???????<tbody id="data"></tbody>
???</table>
</div>

<div id="list">
???<ul></ul>
</div>
<div id="pagecount"></div>
<div class="turn-go">
???<input type="text" maxlength="8" value="1" id="fy_n">
???<span>页
???????<input type="submit" name="btnGo" value="Go" id="go">
???</span>
</div>

// 获取token
var getToken = function(){
???//判断是否存在token
???if(sessionStorage.getItem("token") != null){
???????// 转换成对象后返回
???????return JSON.parse(sessionStorage.getItem("token"));
???}
???var token = null;
???$.ajax({
???????url:"http://beta.open.api.vrseen.net/token/get",
???????type:"GET",
???????dataType:"JSON",
???????async:false,
???????success:function(data){
???????????//转换成json字符串，把token写入本地
???????????sessionStorage.setItem("token",JSON.stringify(data.data));
???????????token = data.data;
???????}
???});
???return token;
}

// 获取数据写入数据
$(function(page){
???var token = getToken();
???// 获取数据写入页面
???// $.ajax({
???// ????url:"http://beta.store.api.vrseen.net/app/list",
???// ????type:"POST",
???// ????headers:{
???// ????????"Token-Key":token.TokenKey,
???// ????????"Token-Value":token.TokenValue
???// ????},
???// ????data:{
???// ????????page:page
???// ????},
???// ????dataType:"JSON",
???// ????success:function(data){
???// ????????// console.log(data);
???// ????????//console.log(data.data)
???// ????????if(data.code == "SUCCESS"){
???// ????????????var ?html ?= "";
???// ????????????// console.log(data.data.lists);
???// ????????????for(var i ?=0;i < data.data.lists.length;i++){
???// ????????????????var d = data.data.lists[i];
???// ????????????????var img = "<img ?width=‘200‘ height=‘200‘ src=‘"+d.icon+"‘/>";
???// ????????????????html +="<tr><td>"+ d.aId+"</td><td>"+ d.cId+"</td><td>"+ d.developer+"</td><td>"+ d.download+"</td><td>"+img+"</td><td>"+ d.name+"</td><td>"+ d.orders+"</td><td>"+ d.price+"</td></tr>";
???// ????????????}
???// ????????????// console.log(html);
???// ????????????$("#data").html(html);
???// ????????}
???// ????}
???// })

???// 分页
???var curPage = 1; //当前页
???getData();
???// 获取数据
???function getData(page){
???????????$.ajax({
???????????url:"http://beta.store.api.vrseen.net/app/list",
???????????type:"POST",
???????????headers:{
???????????????"Token-Key":token.TokenKey,
???????????????"Token-Value":token.TokenValue
???????????},
???????????data:{
???????????????page:page
???????????},
???????????dataType:"JSON",
???????????beforeSend:function(){
???????????????$("#list ul").append("<li id=‘loading‘>loading...</li>");//显示加载动画
???????????},
???????????success:function(data){
???????????????var zys = Math.ceil(data.data.page.total_pages);//总页数 34页
???????????????var total = Math.ceil(data.data.page.last/7);//总页数 34页 ,显示条数
???????????????var current = Number(data.data.page.current); //当前页数
???????????????$("#list ul").empty();//清空数据区
???????????????curPage = current; //当前页
???????????????totalPage = zys; //显示页数
???????????????// var li = "";
???????????????// $.each(list,function(data){ //遍历json数据列
???????????????// ????li += "<li><a href=‘#‘>"+total+"</a></li>";
???????????????// ????//console.log(data)
???????????????// });
???????????????// $("#list ul").append(li);
???????????????// console.log(data.data.page.total_pages)
???????????????//console.log(current)
???????????????if(data.code == "SUCCESS"){
???????????????var ?html ?= "";
???????????????????for(var i ?=0;i < data.data.lists.length;i++){
???????????????????????var d = data.data.lists[i];
???????????????????????var img = "<img ?width=‘200‘ height=‘200‘ src=‘"+d.icon+"‘/>";
???????????????????????html +="<tr><td>"+ d.aId+"</td><td>"+ d.cId+"</td><td>"+ d.developer+"</td><td>"+ d.download+"</td><td>"+img+"</td><td>"+ d.name+"</td><td>"+ d.orders+"</td><td>"+ d.price+"</td></tr>";
???????????????????}
???????????????????// console.log(html);
???????????????????$("#data").html(html);
???????????????}
???????????},
???????????
???????????complete:function(){ //生成分页条
???????????????getPageBar();
???????????????newdata();
???????????????go();
???????????},
???????????error:function(){
???????????????alert("数据加载失败");
???????????}

???????});
???}
???//获取分页条
???function getPageBar(){
???????//页码大于最大页数
???????if(curPage>totalPage) curPage=totalPage;
????????//页码小于1
???????if(curPage<1) curPage=1;
???????// 显示内容当前页和总页数
???????pageStr = "<span>当前页：</span><span>"+curPage
???????+"/"+totalPage+"</span>";
???????//如果是第一页
???????if(curPage==1){
???????????pageStr += "<span>首页</span><span>上一页</span>";
???????}else{
???????????pageStr += "<span><a href=‘javascript:void(0)‘ rel=‘1‘>首页</a></span><span><a href=‘javascript:void(0)‘ rel=‘"+(curPage-1)+"‘>上一页</a></span>";
???????}
????????//如果是最后页
???????if(curPage>=totalPage){
???????????pageStr += "<span>下一页</span><span>尾页</span>";
???????}else{
???????????pageStr += "<span><a href=‘javascript:void(0)‘ rel=‘"+(parseInt(curPage)+1)+"‘> 下一页</a></span><span><a href=‘javascript:void(0)‘ rel=‘"+totalPage+"‘>尾页</a></span>";
???????}
???????$("#pagecount").html(pageStr); ?
???}
???// 更新数据
???function newdata(){
???????$("#pagecount span a").on(‘click‘,function(){
???????????var rel = $(this).attr("rel");
???????????if(rel){
???????????????getData(rel);
???????????????$("#fy_n").val(rel);
???????????}
???????}); ?
???}
???// 跳转功能
???function go(){
???????$("#go").on(‘click‘,function(){
???????????var value = $(‘#fy_n‘).val();
???????????//console.log(value);
???????????if(value){
???????????????getData(value);
???????????}
???????});
???}
})

</script>
</body>
</html>

ajax+分页

原文地址：http://www.cnblogs.com/Byme/p/7554028.html

ajax+分页

知识推荐