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.客服端点击页 ...
随机推荐
- 学习小程序第三天 WXML语言特性
WXML语言特性 1.数据绑定 Musstache 语法 获取json中指定键值:变量名加双括号的绑定语法 如下: (1)绑定文本 注意所有组件和属性 都要小写 (2)绑定属性 ( ...
- OpenGL学习进程（10）第七课：四边形绘制与动画基础
本节是OpenGL学习的第七个课时,下面以四边形为例介绍绘制OpenGL动画的相关知识: (1)绘制几种不同的四边形: 1)四边形(GL_QUADS) OpenGL的GL_QUADS图 ...
- cookie的路径和域
1.Cookie的路径介绍 我们知道Cookie 的属性有很多,其中有一个属性是路径path.有些人认为Cookie 的路径指的是Cookie 在客户端的保存路径,其实并不是.Cookie 的路径是相 ...
- PHP辅攻_[学习资料收集]PHP连接SQLServer2005方法
PHP连接SQLServer2005 1.修改php.ini将extension=php_mssql.dll的注释删除保存. 修改php.in将mssql.secure_connection = Of ...
- 一步一步粗谈linux文件系统（三）----超级块(superblock)【转】
本文转载自:https://blog.csdn.net/fenglifeng1987/article/details/8302921 超级块是来描述整个文件系统信息的,可以说是一个全局的数据结构,可以 ...
- Logistic回归python实现
2017-08-12 Logistic 回归,作为分类器: 分别用了梯度上升,牛顿法来最优化损失函数: # -*- coding: utf-8 -*- ''' function: 实现Logistic ...
- java.lang.NullPointerException报错的几种情况
java.lang.NullPointerException报错的几种情况: 1.字符串变量未初始化: 2.接口类型的对象没有用具体的类初始化,比如: List stuList :这种情况就会报空指针 ...
- Luogu-4774 [NOI2018]屠龙勇士
这题好像只要会用set/平衡树以及裸的\(Excrt\)就能A啊...然而当时我虽然看出是\(Excrt\)却并不会...今天又学了一遍\(Excrt\),趁机把这个坑给填了吧 现预处理一下,找出每条 ...
- spark学习4（zookeeper3.4集群搭建）
第一步:zookeeper安装 通过WinSCP软件将zookeeper-3.4.8.tar.gz软件传送到/usr/zookeeper/目录下 [root@spark1 zookeeper]# ch ...
- VC 模拟CMD 匿名管道
#include "stdafx.h" #include <Windows.h> #include <stdio.h> #include <stdli ...