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

随机推荐

关于PHP的工作流引擎
关于PHP的工作流引擎,除了三大主流开源:PorcessMaker(排名第一,因其有拖放式图形定义界面),RadiCore(基于PETRI NET)和CuteFlow以外,另外还有一个不为人知的,但却 ...
ASP.NET 5应用是如何运行的（3）
ASP.NET 5应用是如何运行的(3) 设置自定义的入口程序体现应用本身与应用托管之间的分离,它使我们可以创建独立于托管环境的应用,并根据需要寄宿于任何一个我们希望的宿主程序下,对于Web应用来说这 ...
leetcode[67] Plus One
题目:对一个用vector存的数字进行加1,然后返回加1后的值. 一次就在oj上通过了. 就是进位加上当前位如果大于9,那就当前位等于0: 随后进位还为1的话就是在数组前面插入一个1: class S ...
分析Java因为语言慢
Java在早期的(例JDK1.2一旦)这是很慢.也许是因为有很多的优化,以提高装置的版本号,Java这是越来越快,所以这是现在非常的Java和C/C++什么什么慢速争议. 我想我自己的理解.谈论的影响 ...
读书笔记—CLR via C#异常和状态管理
前言这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...
造出最好的 CMS 轮子
zerojs! 造出最好的 CMS 轮子 zerojs是一个基于nodejs.angularjs.git的CMS.在它之上可以继续开发出博客.论坛.wiki等类似的内容管理型系统. 拥抱开发者和社区 ...
Unit of work + Repository
(Unit of work + Repository) 今日后开启进阶模式! 谈到MVC与EntityFramework,则不得不说一说事务与仓储(Unit of work + Repository) ...
Android中的dp，px以及wrap_content的实际展示效果
因为一个效果中的图片设置了wrap_content的属性,但在720dp跟540dp上面显示不一致使老大非常恼火.跟他讲也讲不明白.于是乎让我们彼此测试来探个究竟.首先测试的是个图片: 它的物理像素是 ...
JS代码平面化
重构JS代码 - 让JS代码平面化 js中的嵌套函数用的很多,很牛叉,那为何要平面化? 易懂(自己及他人) 易修改(自己及他人) 平时Ajax调用写法(基于jQuery) $.post('url' ...
c#中关于大对象数组的一些心得
在之前的一个课题中,曾经需要用到2W行*3W列的float类型矩阵(大约2.4G),由于无法创建大于2G的对象,当时采用了一些取巧的办法回避了,并没有拿出精力来研究一下这个问题.今天和公司的张哥(大牛 ...

ajax实现分页

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

随机推荐

热门专题