ajax实现分页

使用ajax分页原理：
第一步：做一个表格
第二步：封装两个方法。
第三步：新建个负责显示页面。
第四步：做一个纯PHP处理页面处理要显示页的所有数据

首先使用一张数据比较多的数据库中的表格：

首页面加载后首先导入所有数据，并显示前20条数据。

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>Document</title>

	<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<div>

	<input type="text" id="key" />

	<input type="button" value="查询" id="chaxun" />

</div>

<table width="100%" border="1" bordercolordark="0" bordercolorlight="0">

	<tr>

		<td>代号</td>

		<td>名称</td>

		<td>父级代号</td>

	</tr>

	<tbody id="neirong"><!--显示内容-->

	</tbody>

</table>

<div id="xinxi">

</div>

</body>

<script type="text/javascript">

	var page = 1;//定个变量，当前要显示的页

	Load();//加载数据

	function Load()

	{

		var key = $("#key").val();//查询条件。用户输入的内容

		$.ajax({

			url:"chuli.php",

			data: {

            page: page,

            key: key

        },//传2个参数一当前页2关键字也就是查询条件

			type:"POST",

			dataType:"JSON",

			success: function(data){//匿名函数

					var str = "";//这个将来要放表格显示的

					for(var k in data)//通过K可以获得每一条数据

					{//加载数据完成

						str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号

					}

					$("#neirong").html(str);

			}

		});

	}

</script>

</html>

chuli.php文件：

这里引入了一个php的类文件：

DBDA.class.php

<?php

class DBDA//类名

{	//下面是成员 变量

	public $host= "localhost";//服务器，本机地址

	public $uid = "root";//用户名

	public $pwd = "511108";//用户密码

	public $dbname = "text";//数据库名称

//通过上面的变量来访问数据库。在访问数据库的时候就可以直接造对象

//成员方法。执行SQL语句的方法

public function Query($sql,$type=1)

{

	$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

	$r = $db->query($sql);//判断是不是查询是查询就返回一个二维数组

	if($type==1)//如果type等于1属于查询语句，如果查询语句就要返回一个二维数组

	{

		return $r->fetch_all();//从结果集读取所有数据。因为是二维数组所以就直接return返回

	}

	else

	{

		return $r;//如果不是查询，其他语句就直接return $r

	}

}

//返回字符串的方法

	public function StrQuery($sql,$type=1)

	{

		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

		$r = $db->query($sql);

		if($type==1)

		{

			$attr = $r->fetch_all();

			$str = "";

			foreach($attr as $v)

			{

				$str .= implode("^",$v)."|";

			}

			return substr($str,0,strlen($str)-1);

		}

		else

		{

			return $r;

		}

	}

//返回JSON

	function JSONQuery($sql,$type=1)

	{

		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

		$r = $db->query($sql);

		if($type==1)

		{

		    return json_encode($r->fetch_all(MYSQLI_ASSOC));

		}

		else

		{

			return $r;

		}

	}

}

chuli.php：处理

<?php

include("DBDA.class.php");

$db = new DBDA();

//把上个页面的2个值传过来

$page = $_POST["page"];//当前页

$key = $_POST["key"];//条件，关键字

$num = 20;//定义，一页里多少条数据，

$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条

//写$SQL语句

$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiaoshu},{$num}";//根据关键字查like '%{$tiaojian}%'。

echo $db->JSONQuery($sql);

首页里的分页处理：fenye.php

<?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);

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>Document</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="50%" border="1" bordercolordark="0" bordercolorlight="0">

	<tr>

		<td>代号</td>

		<td>名称</td>

		<td>父级代号</td>

	</tr>

	<tbody id="neirong"><!--显示内容-->

	</tbody>

</table>

<div id="fenyexinxi">

</div>

</body>

<script type="text/javascript">

	var page = 1;//定个变量，当前要显示的页

	Load();//加载数据

	Loadfenyexinxi();//加载分页信息

	//查询

	$("#chaxun").click(function(){

		page = 1;

		Load();//加载数据

		Loadfenyexinxi();//加载分页信息

	})

	function Load()

	{

		var key = $("#key").val();//查询条件。用户输入的内容

		$.ajax({

			url:"chuli.php",

			data: {

            page: page,

            key: key

        },//传2个参数一当前页2关键字也就是查询条件

			type:"POST",

			dataType:"JSON",

			success: function(data){//匿名函数

					var str = "";//这个将来要放表格显示的

					for(var k in data)//通过K可以获得每一条数据

					{//加载数据完成

						str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号

					}

					$("#neirong").html(str);

			}

		});

	}

function Loadfenyexinxi()//分页信息

{

	var str = "";

	var minys = 1;//最小页数

	var maxys = 1;//最大页数

	var key = $("#key").val();//取关键字用于传到zys页面用

	//查总页数

	$.ajax({

		async:false,//同步的

		type:"POST",

		url:"fenye.php",

		data:{key:key},

		dataType:"TEXT",

		success:function(d){

				maxys = d;

		}

	});

	str += "<span>总共："+maxys+"页</span>  ";

	str += "<span id='prev'>上一页</span>";

	//循环做列表，当前页减1，当前页加3

	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>";

	$("#fenyexinxi").html(str);

	//给上一页添加点击事件

	$("#prev").click(function(){

			page = page-1;

			if(page<1)

			{

				page=1;

			}

			Load();//加载数据

			Loadfenyexinxi();//加载分页信息

		})

	//给下一页加点击事件

	$("#next").click(function(){

			page = page+1;

			if(page>maxys)

			{

				page=maxys;

			}

			Load();//加载数据

			Loadfenyexinxi();//加载分页信息

		})

	//给中间的列表加事件

	$(".list").click(function(){

			page = parseInt($(this).attr("bs"));//字符串变整数parseInt

			Load();//加载数据

			Loadfenyexinxi();//加载分页信息

		})

}

</script>

</html>

ajax实现分页的更多相关文章

Ajax做分页
Ajax做分页用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...
Yii 框架ajax搜索分页
要想实现ajax搜索分页其实很简单第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层
利用Linq + Jquery + Ajax 异步分页的实现
在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...
5.Hibernate实现全套增删改查和ajax异步分页
1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...
PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
js ajax php分页组件
github https://github.com/lihefen/pageList html页面 <!DOCTYPE html><html><head>< ...
PHP+JQUEY+AJAX实现分页
HTML <div id="list"> <ul></ul> </div> <div id="pagec ...
PHP+JQUEY+AJAX实现分页【转】
HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left ...
jquery+ajax实现分页
var curPage = 1; //当前页码 var total,pageSize,totalPage; //总记录数,每页显示数,总页数 getData(1); $("#pagecoun ...

随机推荐

POJ 3928 & HDU 2492 Ping pong（树阵评价倒数）
主题链接: PKU:http://poj.org/problem?id=3928 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=2492 Descript ...
Shell的学习就从重装系统开始吧
小标题:与Fedora的爱恨情仇干巴巴的shell学习实在枯燥,看来学习姿势还是要从实践入手起因:传说中的不作死就不会死,昨晚偶遇一本PDF,讲glade编辑界面的,以下就被吸引了,跟着讲解搞出个 ...
kvm与qemu
载请注明出处: http://www.openext.org/2014/04/kvmqemu/ http://blog.csdn.net/muge0913/article/details/245577 ...
AngularJs ng-repeat 必须注意的性能问题
AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题. 在项目中我们使用 ng-repeat 加载完一个列表后,如果再次请求数据,然后过滤 ...
delphi字符串函数大全
转帖:delphi字符串函数大全 2009-11-17 16:43:55 分类: delphi字符串函数大全 ━━━━━━━━━━━━━━━━━━━━━首部 function StringToGUID ...
form-validation--表单验证插件
基于jquery的validationEngine表单验证插件,根据官网提示,该插件支持IE6-8,Chrome浏览器,火狐,Safari,Opera 10,但由于有使用到了css3的阴影和圆角样式, ...
SongTaste音乐下载器
SongTaste音乐下载器 Songtaste是一个非常好的音乐推荐网站, 奈何和duomi搅合在一起, 导致下载音乐非常的麻烦, 现在写了一个简单的"下载器", 通过它可以下载 ...
Visual Studio 自定义项目或工程模板
如何利用 Visual Studio 自定义项目或工程模板在开发项目的时候,由其是商业性质的大型项目时,往往需要在每个代码文件上都加上一段关于版权.开发人员的信息,并且名称空间上都需要带有公司的标志 ...
【WCF系列二：如何调用WCF服务】WCF入门教程（图文）VS2012
上一遍到现在已经有一段时间了,先向关注本文的各位“挨踢”同仁们道歉了.小生自认为一个ITer如果想要做的更好,就需要将自己的所学.所用积极分享出来,接收大家的指导和吐槽.网上也有很多WCF相关的教程, ...
总结windows多线程同步互斥
windows多线程同步互斥--总结我的windows多线程系列文章: windows多线程--原子操作 windows多线程同步--事件 windows多线程同步--互斥量 windows多线程同 ...

ajax实现分页

ajax实现分页的更多相关文章

随机推荐

热门专题