您的位置：首页 > Web前端 > BootStrap

AJAX(二)---局部刷新实现分页效果的实现

2017-09-16 12:06 561 查看
## 案例分析

一、无刷新分页

代码较多，当有必要时再进行使用，避免维护困难

无刷新分页，只是局部刷新，整个页面并无刷新，这样不仅可以减少对带宽，服务器的消耗，还可以给用户带来更好的体验。

当无需局部刷新时，使用传统分页即可，便于编写与维护。

1.1 实现步骤

ajax对传统分页效果的封装.

先制作传统分页效果，在这里我们借助一个封装好的简单的分页类进行制作，这个分页类的样式使用的是bootstrap的样式，只需要设置几个属性即可。

下面是分页类的源码

<?php
/**
* 分页类
*/
class Page
{
//总的记录数
private $total_rows = 100;
//每页显示的数量, 默认每页显示3条数据
private $pagesize = 3;
//默认当前页为1
private $now_page = 1;
//点击超链接时，跳转的页面
private $url = '';
//分页类的属性设为私有，当为不可访问的属性赋值时，自动调用__set
public function __set($name, $value)
{
if(property_exists($this,$name)){
$this -> $name = $value;
}
}
//当访问不可访问的属性时，自动调用__et
public function __get($name)
{
if(property_exists($this,$name)){
return $this -> $name;
}
}
//该核心方法给我们返回一个具有class="pagination"的ul，bootstrap样式
public function create()
{
//在地址后加上page参数
$url = $this -> url ."&page=";
$first = 1;
if($this -> keyword != ''){
$url = $this -> url ."?keyword={$this -> keyword}&page=";
}

$first_active = $this->now_page == 1 ? 'active' :'';
//创建首页的标签
$page_html = <<<HTML
<ul class="pagination">
<li class="$first_active"><a href="{$url}{$first}">首页</a></li>
HTML;

//创建中间的页码数,该创建多少取决于总共有多少页
$count = ceil($this -> total_rows / $this ->pagesize);
//从当前页-3开始，到当前页+3结束
for($i=$this->now_page-3;$i<=$this->now_page+3;$i++){
$active = $this -> now_page == $i ? 'active' : '';
if($i < 2 || $i > $count-1){
continue;
}
$page_html .= <<<HTML
<li class="$active"><a href="{$url}{$i}">$i</a></li>
HTML;
}

//创建尾页的标签
$last_active = $this -> now_page == $count ? 'active' :'';
$page_html .= <<<HTML
<li class="$last_active"><a href="{$url}{$count}">尾页</a></li>
</ul>
HTML;
//返回拼接好的ul
return $page_html;
}
}


接下来通过调用分页类，设置总记录数，地址，每页条数来制作分页，源码如下，bootstrap就不附加了，我使用的版本为3.2.0

<?php
require_once './Page.class.php';
//这里连接数据库
$Mysqli = mysqli_connect('localhost','root','wasd','test');
//设置字符集
$Mysqli->query('SET NAMES utf8');

//当前页
$page_num = isset($_GET['page'])?$_GET['page']:1;
//实例化page类
$page_ob = new Page();
//获取总记录数,并设置
$r_sql = 'SELECT count(*) num FROM emp;';
$res = $Mysqli->query($r_sql);
$rows = $res->fetch_assoc();
$page_ob->total_rows = $rows['num'];
//url
$page_ob->url = 'page.php';
//当前页码
$page_ob->now_page= $page_num;
//为了效果设置,每页5条
$page_ob->pagesize=5;
//接收页码ul
$page_ul = $page_ob->create();
//数据
$offset = ($page_num-1)*3;
$sql = "SELECT empno,ename FROM emp LIMIT $offset,$page_ob->pagesize";
$result =  $Mysqli->query($sql);
$arr = [];
while ($row = $result->fetch_assoc())
{
$arr[] = $row;
}
$str= <<<HTML
<link style="text/css" rel="stylesheet" href="bootstrap.css"/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>员工编号</th>
<th>员工姓名</th>
</tr>
HTML;
echo $str;
foreach ($arr as $v)
{
echo'<tr>';
echo"<td>".$v['empno']."</td>";
echo"<td>".$v['ename']."</td>";
echo'</tr>';

}
echo'</table>';
echo $page_ul;


那么我们如何实现ajax无刷新分页呢？

我们先制作ajax请求，并在想实现无刷新分页的部分进行获取，输出从PHP文件获得的响应。

把ajax封装到showpage函数中，并通过参数将请求的地址（包括page）传递进去，从而实现ajax无刷新分页。

下面是源码

对分页类中页码地址的部分做出修改如下

//该核心方法给我们返回一个具有class="pagination"的ul
public function create()
{
$url = $this -> url ."?page=";
$first = 1;

$first_active = $this->now_page == 1 ? 'active' :'';
//创建首页的标签
$page_html = <<<HTML
<ul class="pagination">
<li class="$first_active"><a href="javascript:showpage('{$url}{$first}')">首页</a></li>
HTML;

//创建中间的页码数,该创建多少取决于总共有多少页

$count = ceil($this -> total_rows / $this ->pagesize);
//从当前页-3开始，到当前页+3结束
for($i=$this->now_page-3;$i<=$this->now_page+3;$i++){
$active = $this -> now_page == $i ? 'active' : '';
if($i < 2 || $i > $count-1){
continue;
}
$page_html .= <<<HTML
<li class="$active"><a href="javascript:showpage('{$url}{$i}')">$i</a></li>
HTML;
}

//创建尾页的标签
$last_active = $this -> now_page == $count ? 'active' :'';
$page_html .= <<<HTML
<li class="$last_active"><a href="javascript:showpage('{$url}{$count}')">尾页</a></li>
</ul>
HTML;
//返回拼接好的ul
return $page_html;
}


发送请求获得响应的页面，数据同样是page.php页面的不再附加

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showpage(url) {
//ajax无刷新
//1.ajax创建对象
var xhr = new XMLHttpRequest();
//2.监听状态
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
//获取结果的对象，输出返回数据
document.getElementById('result').innerHTML = xhr.responseText;
}
};
//发送get请求
xhr.open('get',url);
xhr.send(null);
}
window.onload = function()
{
//传递页码信息，通过page.php的返回页码，实现AJAX无刷新分页
showpage('./page.php?page=1');
}
</script>
</head>
<body>
<h2>ajax无刷新分页</h2>
<div id="result">

</div>
</body>
</html>


以上就是实现AJAX无刷新分页的全部源码。

下面就是最终的效果图，每一个页码都调用showpage函数，并传递相应的urL



总结在这里：

AJAX实现无刷新分页的关键在于将每一页的url获得，并更新请求的url，保持一致，这样就可以实时获得请求数据，而仅仅局部刷新。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax 物联网 bootstrap
相关文章推荐
新的分享
章节导航