ajax无刷新分页
Posted swjieyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax无刷新分页相关的知识，希望对你有一定的参考价值。
//运行在静态页面中的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
body
font-size:12px;
</style>
</head>
<body>
<div id="fpage">数据加载中...</div>
</body>
</html>
//js代码
<script type="text/javascript">
/**
* setPage(url) 根据 url 从 article.php 中获取数据
* @param int pageNum 页码
* @return string
*/
var cache=new Array(); // 缓存变量，当数据被访问过之后放置在缓存中，加快访问速度
function setPage(pageNum)
var fpage = document.getElementById('fpage'); // 获取 fpage 对象
// 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
if (typeof(cache[pageNum])=='undefined')
var ajax = Ajax();
ajax.get('article.php?page='+pageNum, function(data)
fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的
cache[pageNum] = data;
)
else
fpage.innerHTML = cache[pageNum];
setPage(1); // 默认执行
</script>
//php代码
<?php
/**
* $Id: article.php
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once './config.inc.php';
$m = new Model();
$page = new ajaxPage($m->total('article'),20); // $m->total('article') 获取 article 表的记录数；10为每页显示十条
$result = $m->fetchAll('article', '*', '', '', $page->limit); // 取出数据，^_^，很方便吧
echo '<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">';
echo '<caption><h1>华强电子网资讯</h1></caption>';
echo '<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>';
foreach ($result as $v)
echo "<tr height='21'><td align='center'>$v['id']</td><td>$v['title']</td><td align='center'>$v['author']</td><td align='center'>$v['source']</td><td align='center'>$v['date']</td></tr>";
echo '<tr><td align="right" colspan="5">'.$page->fpage().'</td></tr>';
echo '</table>';
?>
以上是关于ajax无刷新分页的主要内容，如果未能解决你的问题，请参考以下文章