ajax+分页
<!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>
ajax+分页的更多相关文章
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- MVC - 11（下）jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- laraver ajax分页
,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 ); include($path); $content = ob_get_cle ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- php--yii框架中的ajax分页与yii框架自带的分页
要想使用Yii分页类 第一步:在控制器层加载分页类 use yii\data\Pagination; 第二步: 使用model层查询数据,并用分分页,限制每页的显示条数 $data = Zhao::f ...
随机推荐
- Servlet第二篇【Servlet调用图、Servlet细节、ServletConfig、ServletContext】
Servlet的调用图 前面我们已经学过了Servlet的生命周期了,我们根据Servlet的生命周期画出Servlet的调用图加深理解 Servlet的细节 一个已经注册的Servlet可以被多次映 ...
- Akka（26）： Stream：异常处理-Exception handling
akka-stream是基于Actor模式的,所以也继承了Actor模式的“坚韧性(resilient)”特点,在任何异常情况下都有某种整体统一的异常处理策略和具体实施方式.在akka-stream的 ...
- hadoop源码import到eclipse工程
1.解压hadoop-1.1.2.tar.gz,重点在src文件夹 2.在eclipse中通过菜单栏创建一个java工程,工程名随便 3.在创建的工程上,点击右键,在弹出菜单中选择最后一项,在弹出窗口 ...
- JVM 菜鸟进阶高手之路九（解惑）
转载请注明原创出处,谢谢! 在第八系列最后有些疑惑的地方,后来还是在我坚持不懈不断打扰笨神,阿飞,ak大神等,终于解决了该问题.第八系列地址:http://www.cnblogs.com/lirenz ...
- spring cloud+dotnet core搭建微服务架构：服务发现（二）
前言 上篇文章实际上只讲了服务治理中的服务注册,服务与服务之间如何调用呢?传统的方式,服务A调用服务B,那么服务A访问的是服务B的负载均衡地址,通过负载均衡来指向到服务B的真实地址,上篇文章已经说了这 ...
- this的四种绑定形式
一 , this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象. 一个例子 function fire ...
- 再起航，我的学习笔记之JavaScript设计模式27(链模式)
链模式 概念介绍 链模式(Operatc of Responsibility): 通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用.从而简化对该对象的多个方法的多次调用时,对该对象的 ...
- Sql Server——查询(二)
上次写了查询里的一些简单的查询方法,如果说上次的是初级查询,那这次的就是高级查询了. 今天主要是聚合函数.分组查询.连接查询.联合查询.在我看来前三个挺简单的,稍微难理解点的也就最后一个,为什么呢?因 ...
- webapp 启动 手机app
<div class="downLoad clearfix"> <div onclick="jsOpenApp.Close(this);" c ...
- Linux系统初始化过程及运行级别简介
Linux开机过程: 1 开机自检(BIOS):初始化硬件,查找启动介质 2 MBR引导 3 GRUB引导菜单:GRUB程序安装在Bootloader 4 加载内核(kernel) 5 运行INIT进 ...