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.客服端点击页 ...
随机推荐
- PyQt4测试安装ok的程序
# -*- coding: utf-8 -*- """ ------------------------------------------------- File Na ...
- Python基础（19）_异常处理
一.异常处理 错误和异常: 1.错误的种类: 1)语法错误:这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正 2)逻辑错误: 例如: res1=1/0 .es2=1+'str ...
- mtime、atime、ctime基本解释
不罗嗦 Access time.Modify time.Change time,也就是访问时间.修改时间和状态时间. >修改时间:文件的内容被最后一次修改的时间,我们经常用的ls -l命令显示出 ...
- java WordUtils word文档工具类
package com.sicdt.library.core.utils; import java.io.ByteArrayOutputStream; import java.io.IOExcepti ...
- Emgu在引用openCV时提示：无法加载 DLL“opencv_core2410”: 找不到指定的模块。
在引用开源代码openCV时发现了如下问题: 无法加载 DLL“opencv_core2410”: 找不到指定的模块. (异常来自 HRESULT:0x8007007E). 解决方法如下: 将Emgu ...
- EG:nginx反向代理两台web服务器,实现负载均衡 所有的web服务共享一台nfs的存储
step1: 三台web服务器环境配置:iptables -F; setenforce 0 关闭防火墙:关闭setlinux step2:三台web服务器 装软件 step3: 主机修改配置文件:vi ...
- DNS 介绍
DNS 介绍 DNS 为 Domain Name System (域名系统的缩写),它是一种将ip地址转换为对应的主机名或将主机名转换成与之对应的ip地址的一种服务机制.DNS使用TCP和UDP,端口 ...
- Hearbeat 工作原理
Hearbeat 原理 heartbeat (Linux-HA)的工作原理:heartbeat最核心的包括两个部分,心跳监测部分和资源接管部分,心跳监测可以通过网络链路和串口进行,而且支持冗 余链路, ...
- 20145230《Java程序设计》第5周学习总结
20145230 <Java程序设计>第5周学习总结 教材学习内容 本周主要学习的内容是关于异常处理的,感觉这部分内容对我们这种初学者 来说非常重要.举个例子,倘若你在编写一个Java程序 ...
- 《机器学习实战-KNN》—如何在cmd命令提示符下运行numpy和matplotlib
问题背景:好吧,文章标题是瞎取得.平常用cmd运行python代码问题不大,我在学习<机器学习实战>这本书时,发现cmd无法运行import numpy as np以及import mat ...