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> &nbsp;";
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> &nbsp;";
}
else
{
str += "<span class='list' bs='"+i+"'>"+i+"</span> &nbsp;";
} }
} 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做无刷新分页的更多相关文章

  1. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  2. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  3. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  4. javascript项目实战---ajax实现无刷新分页

    分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...

  5. ajax实现无刷新分页效果

    基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...

  6. Ajax做无刷新三级联动

    1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

    最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...

  8. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  9. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

随机推荐

  1. 学习小程序第三天 WXML语言特性

    WXML语言特性     1.数据绑定   Musstache 语法 获取json中指定键值:变量名加双括号的绑定语法 如下: (1)绑定文本 注意所有组件和属性 都要小写 (2)绑定属性     ( ...

  2. OpenGL学习进程(10)第七课:四边形绘制与动画基础

        本节是OpenGL学习的第七个课时,下面以四边形为例介绍绘制OpenGL动画的相关知识:     (1)绘制几种不同的四边形: 1)四边形(GL_QUADS) OpenGL的GL_QUADS图 ...

  3. cookie的路径和域

    1.Cookie的路径介绍 我们知道Cookie 的属性有很多,其中有一个属性是路径path.有些人认为Cookie 的路径指的是Cookie 在客户端的保存路径,其实并不是.Cookie 的路径是相 ...

  4. PHP辅攻_[学习资料收集]PHP连接SQLServer2005方法

    PHP连接SQLServer2005 1.修改php.ini将extension=php_mssql.dll的注释删除保存. 修改php.in将mssql.secure_connection = Of ...

  5. 一步一步粗谈linux文件系统(三)----超级块(superblock)【转】

    本文转载自:https://blog.csdn.net/fenglifeng1987/article/details/8302921 超级块是来描述整个文件系统信息的,可以说是一个全局的数据结构,可以 ...

  6. Logistic回归python实现

    2017-08-12 Logistic 回归,作为分类器: 分别用了梯度上升,牛顿法来最优化损失函数: # -*- coding: utf-8 -*- ''' function: 实现Logistic ...

  7. java.lang.NullPointerException报错的几种情况

    java.lang.NullPointerException报错的几种情况: 1.字符串变量未初始化: 2.接口类型的对象没有用具体的类初始化,比如: List stuList :这种情况就会报空指针 ...

  8. Luogu-4774 [NOI2018]屠龙勇士

    这题好像只要会用set/平衡树以及裸的\(Excrt\)就能A啊...然而当时我虽然看出是\(Excrt\)却并不会...今天又学了一遍\(Excrt\),趁机把这个坑给填了吧 现预处理一下,找出每条 ...

  9. spark学习4(zookeeper3.4集群搭建)

    第一步:zookeeper安装 通过WinSCP软件将zookeeper-3.4.8.tar.gz软件传送到/usr/zookeeper/目录下 [root@spark1 zookeeper]# ch ...

  10. VC 模拟CMD 匿名管道

    #include "stdafx.h" #include <Windows.h> #include <stdio.h> #include <stdli ...