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

随机推荐

企业办公即时通信软件TeamTalk
TeamTalk 一键部署方案:TTAutoDeploy TeamTalk 整套服务提供模块部署脚本和一键部署方案,主要模块有JDK,NGINX,PHP,PERCONA(MYSQL), REDIS ...
CSS背景图片定位
原文:CSS背景图片定位在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
工作小总结（字符串包含，获取当前页面的url等系列问题）
1.字符串包含: var str="我爱中国";if(str.indexOf("中国")>=0){ alert("含有此字符串");} ...
Mysql 使用 select into outfile
Mysql支持将查询结果到处默认语法 select .. from table into outfile "filepath\filename.txt"; 如果在执行的过程中遇 ...
VC++注射过程
2014/10/19 11:12 // stdafx.h : // // // #pragma once #include "targetver.h" #include <s ...
oracle中intersect的用法
和 UNION 指令类似, INTERSECT 也是对两个 SQL 语句所产生的结果做处理的.不同的地方是, UNION 基本上是一个 OR (如果这个值存在于第一句或是第二句,它就会被选出),而 I ...
mvc日期控件datepick的几篇文章，日后再总结吧
instinctcoder里有两篇,入门级的 http://instinctcoder.com/asp-net-mvc-4-jquery-datepicker/ http://instinctcode ...
目前比较流行的Python科学计算发行版
经常有身边的学友问到用什么Python发行版比较好? 其实目前比较流行的Python科学计算发行版,主要有这么几个: Python(x,y) GUI基于PyQt,曾经是功能最全也是最强大的,而且是Wi ...
利用自定义的AuthenticationFilter实现Basic认证
[ASP.NET MVC] 利用自定义的AuthenticationFilter实现Basic认证很多情况下目标Action方法都要求在一个安全上下文中被执行,这里所谓的安全上下文主要指的是当前 ...
【值得收藏】Mathematica数值计算工具的学习资料汇编【可免费下载】
Mathematica学习教程 Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.Mathematica与Matlab ...

ajax实现分页

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

随机推荐

热门专题