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

最新推荐文章于 2021-08-06 10:37:38 发布

原创

最新推荐文章于 2021-08-06 10:37:38 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #物联网 #bootstrap

## 案例分析

一、无刷新分页

代码较多，当有必要时再进行使用，避免维护困难
无刷新分页，只是局部刷新，整个页面并无刷新，这样不仅可以减少对带宽，服务器的消耗，还可以给用户带来更好的体验。
当无需局部刷新时，使用传统分页即可，便于编写与维护。

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="$