碼上歡樂
相關內容    簡體    繁體

AJAX實現分頁

本文轉載自   查看原文   2017-01-10 15:11   28510    前端Html

使用AJSX分頁原理：封裝兩個方法，一個方法負責顯示，一個負責寫入分頁欄。

首先使用一張數據比較多的數據庫中的表格：

 

主界面加載后首先導入所有數據，並顯示前20條數據，在訪問數據庫時，使用limit顯示前20條：

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>無標題文檔</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" cellpadding="0" cellspacing="0">
			<tr>
				<td>代號</td>
				<td>名稱</td>
				<td>父級代號</td>
			</tr>

			<tbody id="nr">

			</tbody>

		</table>

		<div id="xinxi">

		</div>

	</body>
</html>

　　

 

 

首先把表頭顯示出來，要導入jq包。

 

用AJAX從數據庫中用limit20條每頁的搜索顯示第一頁：

js代碼：

 

<script type="text/javascript">
	var page = 1; //當前頁
        Load(); //加載數據
        

        function Load() {
	var key = $("#key").val(); //查詢條件

	$.ajax({
		url: "chuli.php",
		data: {
			page: page,
			key: key
		},
		type: "POST",
		dataType: "JSON",
		success: function(data) {
			var str = "";
			for(var k in data) {
				str += "<tr><td>" + data[k].AreaCode + "</td><td>" + data[k].AreaName + "</td><td>" + data[k].ParentAreaCode + "</td></tr>";
			}
			$("#nr").html(str);
		}
	});
}

 

　　

chuli.php文件：

<?php
include("DBDA.class.php");
$db = new DBDA();

$page = $_POST["page"];
$key = $_POST["key"];
$num = 20;
$tiao = ($page-1)*$num;

$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";

echo $db->JSONQuery($sql);

　　

這里引入了一個php的類文件：

此類文件用來返回字符串，數據庫搜索結果，或者JSON數據：

DBDA.class.php

<?php
class DBDA
{
	public $host="localhost";
	public $uid = "root";
	public $pwd = "";
	public $dbname = "12345";
	
	//成員方法
	public function Query($sql,$type=1)
	{
		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
		$r = $db->query($sql);
		
		if($type==1)
		{
			return $r->fetch_all();
		}
		else
		{
			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;
		}
	}
}

　

結果：

 

 

 加載另外的一個分頁欄的方法，實現以下效果：

function LoadXinXi() {       //加載分頁信息
	var str = "";
	var minys = 1;
	var maxys = 1;
	var key = $("#key").val();

	//查總頁數
	$.ajax({
		async: false,
		url: "zys.php",
		data: {
			key: key
		},
		type: "POST",
		dataType: "TEXT",
		success: function(d) {
			maxys = d;
		}
	});

	str += "<span>總共：" + maxys + "頁</span>  ";
	str += "<span id='prev'>上一頁</span>";

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

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

	//給上一頁添加點擊事件
	$("#prev").click(function() {
			page = page - 1;
			if(page < 1) {
				page = 1;
			}
			Load(); //加載數據
			LoadXinXi(); //加載分頁信息
		})
		//給下一頁加點擊事件
	$("#next").click(function() {
			page = page + 1;
			if(page > maxys) {
				page = maxys;
			}
			Load(); //加載數據
			LoadXinXi(); //加載分頁信息
		})
		//給中間的列表加事件
	$(".list").click(function() {
		page = parseInt($(this).attr("bs"));
		Load(); //加載數據
		LoadXinXi(); //加載分頁信息
	})
}

　　

php處理文件（zys.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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>無標題文檔</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="100%" border="1" cellpadding="0" cellspacing="0">
			<tr>
				<td>代號</td>
				<td>名稱</td>
				<td>父級代號</td>
			</tr>

			<tbody id="nr">

			</tbody>

		</table>

		<div id="xinxi">

		</div>

	</body>
	<script type="text/javascript">var page = 1; //當前頁

Load(); //加載數據
LoadXinXi(); //加載分頁信息

//查詢
$("#chaxun").click(function() {
	page = 1;
	Load(); //加載數據
	LoadXinXi(); //加載分頁信息
})

function Load() {
	var key = $("#key").val(); //查詢條件

	$.ajax({
		url: "chuli.php",
		data: {
			page: page,
			key: key
		},
		type: "POST",
		dataType: "JSON",
		success: function(data) {
			var str = "";
			for(var k in data) {
				str += "<tr><td>" + data[k].AreaCode + "</td><td>" + data[k].AreaName + "</td><td>" + data[k].ParentAreaCode + "</td></tr>";
			}
			$("#nr").html(str);
		}
	});
}

function LoadXinXi() {
	var str = "";
	var minys = 1;
	var maxys = 1;
	var key = $("#key").val();

	//查總頁數
	$.ajax({
		async: false,
		url: "zys.php",
		data: {
			key: key
		},
		type: "POST",
		dataType: "TEXT",
		success: function(d) {
			maxys = d;
		}
	});

	str += "<span>總共：" + maxys + "頁</span>  ";
	str += "<span id='prev'>上一頁</span>";

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

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

	//給上一頁添加點擊事件
	$("#prev").click(function() {
			page = page - 1;
			if(page < 1) {
				page = 1;
			}
			Load(); //加載數據
			LoadXinXi(); //加載分頁信息
		})
		//給下一頁加點擊事件
	$("#next").click(function() {
			page = page + 1;
			if(page > maxys) {
				page = maxys;
			}
			Load(); //加載數據
			LoadXinXi(); //加載分頁信息
		})
		//給中間的列表加事件
	$(".list").click(function() {
		page = parseInt($(this).attr("bs"));
		Load(); //加載數據
		LoadXinXi(); //加載分頁信息
	})
}</script>
</html>

　　

實現分頁效果：

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ajax實現分頁和分頁查詢 Ajax分頁功能的實現 laravel框架實現ajax分頁 jquery+ajax實現分頁 kkpager 實現ajax分頁查詢 jQuery +ajax +json+實現分頁 jQuery+AJAX實現純js分頁功能 Ajax方式分頁加載列表實現 thinkphp下實現ajax無刷新分頁 Bootstrap Paginator分頁插件+ajax 實現動態無刷新分頁
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM