Ajax做无刷新分页
1.主页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head> <body> <div>
<input type="text" id="key" />
<input type="button" value="查询" id="chaxun" />
</div> <table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代号</td>
<td>名称</td>
<td>父级代号</td>
</tr> <tbody id="nr"> </tbody> </table> <div id="xinxi"> </div> </body>
<script type="text/javascript"> var page = 1; //当前页 Load(); //加载数据
LoadXinXi(); //加载分页信息 //查询
$("#chaxun").click(function(){
page = 1;
Load(); //加载数据
LoadXinXi(); //加载分页信息
}) function Load()
{
var key = $("#key").val(); //查询条件 $.ajax({
url:"chuli.php",
data:{page:page,key:key},
type:"POST",
dataType:"JSON",
success: function(data){
var str = "";
for(var k in data)
{
str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
}
$("#nr").html(str);
}
});
} function LoadXinXi()
{
var str = "";
var minys = 1;
var maxys = 1;
var key = $("#key").val(); //查总页数
$.ajax({
async:false,
url:"zys.php",
data:{key:key},
type:"POST",
dataType:"TEXT",
success: function(d){
maxys = d;
}
}); str += "<span>总共："+maxys+"页</span> ";
str += "<span id='prev'>上一页</span>"; for(var i=page-2;i<page+3;i++)
{
if(i>=minys && i<=maxys)
{
if(i==page)
{
str += "<span class='dangqian' bs='"+i+"'>"+i+"</span> ";
}
else
{
str += "<span class='list' bs='"+i+"'>"+i+"</span> ";
} }
} str += "<span id='next'>下一页</span>"; $("#xinxi").html(str); //给上一页添加点击事件
$("#prev").click(function(){
page = page-1;
if(page<1)
{
page=1;
}
Load(); //加载数据
LoadXinXi(); //加载分页信息
})
//给下一页加点击事件
$("#next").click(function(){
page = page+1;
if(page>maxys)
{
page=maxys;
}
Load(); //加载数据
LoadXinXi(); //加载分页信息
})
//给中间的列表加事件
$(".list").click(function(){
page = parseInt($(this).attr("bs"));
Load(); //加载数据
LoadXinXi(); //加载分页信息
})
} </script>
</html>
2.获取总页数处理页面
<?php
include("DBDA.class.php");
$db = new DBDA(); $key = $_POST["key"];
$num = 20; $sql = "select count(*) from chinastates where areaname like '%{$key}%'"; $zts = $db->StrQuery($sql); echo ceil($zts/$num);
3.分页查询处理页面
<?php
include("DBDA.class.php");
$db = new DBDA(); $page = $_POST["page"];
$key = $_POST["key"];
$num = 20;
$tiao = ($page-1)*$num; $sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}"; echo $db->JSONQuery($sql);
Ajax做无刷新分页的更多相关文章
- Ajax 实现无刷新分页
Ajax 实现无刷新分页
- TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- javascript项目实战---ajax实现无刷新分页
分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...
- ajax实现无刷新分页效果
基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...
- Ajax做无刷新三级联动
1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- knockout Ajax异步无刷新分页 Demo +mvc+bootstrap
最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
随机推荐
- 剑指offer 面试41题
面试41题: 题目:数据流中的中位数 题:如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值 ...
- 剑指offer 面试61题
面试61题: 题目:LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到 ...
- 20160422 --Switch…case 总结； 递归算法
13 2016-04-22 11:01:00 Switch…case 总结(网摘) 例题: Console.WriteLine("1.汉堡包"); Console.WriteLi ...
- 【Tech】单点登录系统CAS服务器端搭建及实现用户名密码由MYSQL数据库验证
CAS是YALE大学发起的一个开源项目,旨在为web应用系统提供一种可靠的单点登录方法.它主要分为client和server端,server端负责对用户的认证工作,client端负责处理对客户端受保护 ...
- 20145231 《Java程序设计》第一次实验
实验一 Java开发环境的熟悉(Windows+IDEA) 实验内容 使用JDK编译.运行简单的Java程序: 使用IDEA编辑.编译.运行.调试java程序: 实验知识点 JVM.JRE.JDK的安 ...
- MySQL实习训练1
[转载]http://www.cnblogs.com/AndrewXu/p/4779648.html 1. 打开cmd,输入,回车 mysql -uroot -p -P3306 -h127. 1)-u ...
- 吴恩达深度学习笔记（七） —— Batch Normalization
主要内容: 一.Batch Norm简介 二.归一化网络的激活函数 三.Batch Norm拟合进神经网络 四.测试时的Batch Norm 一.Batch Norm简介 1.在机器学习中,我们一般会 ...
- H3C 交换机设置telnet WEB用户
huwei : local-user admin password cipher @#$@#$ service-type telnet ssh service-type telnet ssh leve ...
- /var/spool/clientmqueue 爆满问题
当你使用简单的sendmail发邮件的时候,或者系统默认要发一些邮件(比如cron发的邮件)的时候,首先会把邮件拷贝到这个目录里,然后等待MTA(mail transfer agent) 来处理,MT ...
- XXL-Job分布式任务调度
分布式情况下定时任务会出现哪些问题? 分布式集群的情况下,怎么保证定时任务不被重复执行 分布式定时任务解决方案 ①使用zookeeper实现分布式锁 缺点(需要创建临时节点.和事件通知不易于扩展) ② ...