jQuery实现无刷新分页

最新推荐文章于 2022-12-30 09:02:46 发布

晨淼

最新推荐文章于 2022-12-30 09:02:46 发布

阅读量955

点赞数

分类专栏： javascript php

本文链接：https://blog.csdn.net/zzq_88/article/details/12177367

版权

php 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

HTML

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language='javascript' src='./js/jquery.js'></script>
	<script type="text/javascript">
		/**
		* jQuery实现无刷新分页
		* 
		*/
		// 全局变量
		var num;					// 初始化页码
		var cache = new Array();	// 缓存数据

		// 分页
		function display(e){		// alert(num);
			pageNum = e;
			var $fpage = $('#fpage');
			var data = {page : pageNum};

			if(cache[pageNum] == undefined){
				// 没有缓存实现ajax请求
				$.post('page.php', data, function(msg){
					$fpage.html(msg);
					cache[pageNum] = msg;
				});
			} else {
				// 有缓存直接读取缓存,减轻服务器压力
				$fpage.html(cache[pageNum]);
			}
		}

		// 控制器
		$(document).ready(function(){
			display(1);
		});
	</script>
</head>
<body>
	<div id='fpage'>数据加载中...</div>
</body>
</html>

PHP

<?php

	require './config.inc.php';
	$db = MYDB :: getInstance($glob);
	$table = 'zzq_random';

	extract($_POST);						// $page 是页码
	// 判断文件是否过期
	if(isset($html_file)){
		date_default_timezone_set('PRC');
		$file_time = date('Ymd', strtotime(filemtime($html_file)));
	} else {
		$file_time = OB_DIR.date('Ymd');
		if(!is_dir($file_time)){
			mkdir($file_time);
		}
	}
	// 分目录存放
	$html_file = $file_time.'/'.'page_'.$page.'.html';

	// 判断是否有缓存文件,如果有缓存文件执行缓存文件
	if(file_exists($html_file)){
		echo file_get_contents($html_file);
		exit;
	}



	// 没有缓存文件就执行下列语句
	$query = "SELECT count(*) as num FROM `$table`";
	$count = $db -> getOne($query);			// 取得总条数
	$pageSize = 20;							// 每页显示多少条
	$pageCount = ceil($count / $pageSize);	// 总页数

	// 上一页
	$pageBefore = $page - 1;
	if($pageBefore < 1){
		$pageBefore = 1;
	}

	// 下一页
	$pageAfter = $page + 1;
	if($pageAfter > $pageCount){
		$pageAfter = $pageCount;
	}

	// 分页公式
	$offset = ($page - 1) * $pageSize;
	$query = "SELECT * FROM `$table` WHERE 1 LIMIT $offset,$pageSize";
	$result = $db -> getAll($query);
	//$result['data'] = $result;

	$str0 = "<table border='1' cellspacing='0' align='center'>";
	$str0.= "<tr>";
	$str0.= "<td>id</td>";
	$str0.= "<td>name</td>";
	$str0.= "<td>department_id</td>";
	$str0.= "</tr>";
	

	foreach($result as $k => $v){
		$str0.= "<tr>";
		$str0.= "<td>{$v['id']}</td>";
		$str0.= "<td>{$v['name']}</td>";
		$str0.= "<td>{$v['department_id']}</td>";
		$str0.= "</tr>";
	}
	$str0.= "</table><br />";
	$str0.= "<div align='center'><a href='javascript:viod(0)' οnclick=display(" . 1 . ")>首页</a>";
	$str0.= "<a href='javascript:viod(0)' οnclick=display(" . $pageBefore . ")>上一页</a>";
	for($i=0; $i<$pageCount; ++$i){
		$n = $i + 1;
		// 按钮颜色
		if($n == $page){
			$str0.= " <span style='cursor:pointer;width:20px;height:20px;background:#66ff99;'><a href='javascript:viod(0)'οnclick=display(" . $n .  ")>$n</a></span> ";
		} else {
			$str0.= " <span style='cursor:pointer;width:20px;height:20px;background:#ffffff;'><a href='javascript:viod(0)'οnclick=display(" . $n .  ")>$n</a></span> ";
		}
	}
	$str0.= "<a href='javascript:viod(0)' οnclick=display(" . $pageAfter . ")>下一页</a>";
	$str0.= "<a href='javascript:viod(0)' οnclick=display(" . $pageCount . ")>末页</a>";
	$str0.= "当前 {$page}页/共计{$pageCount}页</div>";
	

	
	// 开启ob缓存
	ob_start();
	echo $str0;
	$html_str = ob_get_contents();
	file_put_contents($html_file, $html_str);

?>

晨淼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现无刷新分页

HTML /** * jQuery实现无刷新分页 * */ // 全局变量 var num; // 初始化页码 var cache = new Array(); // 缓存数据 // 分页 function display(e){ // alert(num); pageNum = e; var $fpage = $('
复制链接

扫一扫

专栏目录