<!DOCTYPE html><html><head lang="zh-cn"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><m ...
<!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>
<!--分頁結束-->
<script type="text/javascript">
//載入token
//token地址為 http://beta.open.api.vrseen.net/token/get
//從介面獲取數據
//介面為 http://beta.store.api.vrseen.net/appcategory/list
// 獲取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>
