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

随机推荐

javascript6
eval("3+2")//5 eval():全局eval():严格eval() 函数和可执行的对象(callable object) delete一元操作符,善处对象属性或者数组元 ...
Python什么是值或引用函数参数
这篇文章是Python前往遇到有疑问的功能. 下面一段是原有的基础教程Python函数. 按值传递參数和按引用传递參数全部參数(自变量)在Python里都是按引用传递.假设你在函数里改动了參数,那么 ...
appium之java API(2)
TouchAction AppiumDriver的辅助类,主要针对手势操作,比方滑动.长按.拖动等.TouchAction的原理是讲一系列的动作放在一个链条中,然后将该链条传递给server.serv ...
快速构建Windows 8风格应用32-构建辅助磁贴
原文:快速构建Windows 8风格应用32-构建辅助磁贴引言 Windows Phone中,我们开发者可能会开发的一个功能点是将数据列表中某一项"Pin To Start(固定到开始屏幕 ...
mysql的事物
所谓的事物就是一组原子性的SQL语句,或者说是一个独立的工作单元. 1.事物拥有四大特征: ①原子性(atomicity):一个事物必须被分为一个不可分割的的最小单元,整个事物中的所有操作要么全部提交 ...
[Android] 获取WebView的页面标题(Title)-----WebChromeClient.onReceivedTitle()方法的重写
应用开发中需要获取WebView当前页面的标题,可能通过对WebChromeClient.onReceivedTitle()方法的重写来实现效果图如下: 代码如下: public class Mai ...
Restful WebApi开发实践
随笔分类 - Restful WebApi开发实践 C#对WebApi数据操作摘要: ## 目标简化并统一程序获取WebApi对应实体数据的过程,方便对实体进行扩充.原理就是数据服务使用反射发现 ...
C#实现函数根据返回类型重载
一直以来都很奇怪为何C#不能直接支持函数返回值重载, 比如如下两个函数是编译不过的 Public Class DbHelper { Public Static int ExecuteScalar(); ...
iis处理请求随记回顾
----http是无状态的, 每次http请求户不影响,都是独立的:不会记的上次请求: -------iis原理:输入地址--socket封装请求体报文--发送---iis解析封装响应体---返回: ...
《剑指Offer》面试题-从头到尾打印链表
题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 输入: 每个输入文件仅包含一组测试样例.每一组测试案例包含多行,每行一个大于0的整数,代表一个链表的节点.第一行是链表第一个节点的值,依次类推 ...

ajax实现分页

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

随机推荐

热门专题