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 ...

随机推荐

C# Winform 界面线程的Invoke死锁，以及Application.DoEvent的问题
1.对于非界面线程来说,Invoke是把一个操作丢到界面线程的队列里,然后阻塞,等到这个操作被界面线程完成后,才继续后续操作.也就是说,Invoke是同步的. 问题来了,如果界面线程此时正在等待这个非 ...
一些javascript常用方法
1.输入一个正整数n,从1累加到n,返回结果.(如果输入为非正整数,如:小数.0.负数.NaN或其它非数字则返回false) function f(n){ return ~~+n == n & ...
selenium2入门断言失败自动截图（四）
一般web应用程序出错过后,会抛出异常.这个时候能截个图下来,当然是极好的. selenium自带了截图功能. //获取截图file File scrFile= ((TakesScreenshot)d ...
C# 标签(条码)
C# 标签(条码) 上一篇说到条码的打印,主要是通过读取模板定义文件(XML文件),然后结合从数据库中读取的动态数据结合而产生条码.下面主要说一下如何设计这个条码模板.设计过程也很简单,只需要简单的拖 ...
leetcode第37题--Count and Say
题目:(据说是facebook的面试题哦) The count-and-say sequence is the sequence of integers beginning as follows:1, ...
大约ActionContext.getContext()使用体验
这是我在另一个人的博客看了,原来博客的时间长一点.我把它简化了一下,运营商,以方便它看起来. 为了避免与Servlet API耦合在一起,方便Action类做单元測试,Struts 2对HttpSer ...
宿主机跟Vmware中的linux使用host-only，bridge 方式通信
声明:我的机器在本文中叫宿机,vmware中的linux就叫linux 本文已经实现了通过host-only模式宿机 ping通 linux,但是在host-only模式下,linux 没有pin ...
区域、模板页与WebAPI初步
区域.模板页与WebAPI初步一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域( ...
构建日均千万PV Web站点1
如何构建日均千万PV Web站点 (一) 其实大多数互联网网站起初的网站架构都是(Linux+Apache+MySQL+PHP). 不过随着时代的发展,科技的进步.互联网进入寻常百姓家的生活.所谓的用 ...
Git 和 Github的关系
惭愧,这个问题到昨天才弄明白! Git 其实是一种版本控制的协议,和SVN/CVS类似,git协议定义了一个版本控制相关的各个操作,和SVN/CVS不同的是,git采用的是分布式的方法,并不需要服务器 ...

ajax实现分页

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

随机推荐

热门专题