ajax异步请求分页显示
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src='__PUBLIC__/jquery-3.0.0.min.js'></script>
</head>
<body>
<div id="list">
<ul></ul>
</div>
<div id="pagecount"></div>
</body>
</html>
<script>
var curPage = 1; //当前页码
var total,pageSize,totalPage; //总记录数,每页显示数,总页数
//获取数据
function getData(page){
$.ajax({
type: 'POST',
url: "{:U('Index/ajaxs')}",
data: {'pageNum':page-1},
dataType:'json',
beforeSend:function(){
$("#list ul").append("<li id='loading'>loading...</li>");//显示加载动画
},
success:function(json){
$("#list ul").empty();//清空数据区
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = json.totalPage; //总页数
var li = "";
var list = json.list;
$.each(list,function(index,array){ //遍历json数据列
li += "<li><a href='#'>"+array['id']+"</a></li>";
});
$("#list ul").append(li);
},
complete:function(){ //生成分页条
getPageBar();
fun();
},
error:function(){
alert("数据加载失败");
}
});
}
//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span>共"+total+"条</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(){
getData(1);
});
function fun(){
$("#pagecount span a").on('click',function(){
var rel = $(this).attr("rel");
alert(rel)
if(rel){
getData(rel);
}
});
}
</script>
PHP代码:
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
echo 'ddd';
$this->display();
exit;
$result = mysql_query("select id from food");
$total = mysql_num_rows($result);//总记录数
$pageSize = 6; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数
$startPage = $page*$pageSize; //开始记录
//构造数组
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit
$startPage,$pageSize"); //查询分页数据
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic'],
);
}
echo json_encode($arr); //输出JSON数据
}
public function ajaxs(){
$page = intval($_POST['pageNum']); //当前页
$statistics=M('SearchStatistics');
$total=$statistics->count();//总记录数
$pageSize = 6; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数
$startPage = $page*$pageSize; //开始记录
//构造数组
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$data=$statistics->limit("$startPage,$pageSize")->select();
// dump($data);
$arr['list'] = $data;
echo json_encode($arr); //输出JSON数据
}
}
ajax异步请求分页显示的更多相关文章
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- ajax异步请求Response.Redirect重定向
一个ajax异步请求报错->捕获异常->重定向错误提示页面. 一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- html5+php实现文件的断点续传ajax异步上传
html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- 项目中使用的ajax异步读取数据结构设计
设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...
- MVC&WebForm对照学习:ajax异步请求
写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...
- art.dialog 与 ajax 异步请求
上周写了一些代码,涉及到jquery异步请求,这里归纳总结下,希望对刚接触编程的同学有帮助. 主要习惯使用 art.dialog 框架,非常好用,在异步请求上,它提供了很多简便的方法. 加载使用art ...
随机推荐
- C# socket编程 使用udp实现单对单的连接对话
ipLocalPoint = new IPEndPoint(IPAddress.Parse("192.168.31.122"), 5000); //定义网络类型,数据连接类型和网络 ...
- 使用node.js 文档里的方法写一个web服务器
刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...
- jq时间戳转化为可视化时间
//2016年5月21日 23:12:07 function getDateTimeToDate(dt){ var dateTime = new Date(dt); var date = dateTi ...
- 使用BMap.Label给百度地图的BMap.Marker上加上数字序号
marker = new BMap.Marker(pointList[i]) marker.setLabel(getNumberLabel(i)); function getNumberLabel(n ...
- Atitit.提升api兼容性的方法 v3 q326
Atitit.提升api兼容性的方法 v3 q326 1. Atitit.兼容性的“一加三”策略1 2. 2. 扩展表模式1 3. 3. 同时运行模式1 3.1. 3.1. 完美的后向兼容性2 3.2 ...
- Atitit. atiJavaExConverter4js 新的特性
Atitit. atiJavaExConverter4js 新的特性 1.1. V1新特性1 1.2. V2 新特性1 2. Keyword1 3. Catch1 4. Convert n Thro ...
- JavaScript之变量、作用域和内存问题
js中的变量可能包含2种数据类型,基础数据类型和引用数据类型. 一般而言,基本数据类型是数据段,引用数据类型是对象. 保存方式的不同: 基本类型可以直接操作保存在变量中的值:而引用类型真实的值是保存在 ...
- 使用Crypto++库编译出错 解决办法
错误信息: >------ 已启动生成: 项目: testCrypto++, 配置: Debug Win32 ------ >正在编译... >main.cpp >正在链接.. ...
- JPA动态查询封装
一.定义一个查询条件容器 /** * 定义一个查询条件容器 * * @param <T> */ public class Criteria<T> implements Spec ...
- Struts2 异常处理
Struts提供了一个更简单的方式来处理未捕获的异常,并将用户重定向到一个专门的错误页面.您可以轻松地Struts配置到不同的异常有不同的错误页面. Struts的异常处理所使用的“exception ...