yii2.0下，JqPaginator与load实现无刷新翻页

JqPaginator下载地址http://jqpaginator.keenwon.com/

控制器部分：

<?php
namespace backend\controllers;

use common\models\Common;
use Yii;
use yii\base\Controller;
use common\models\Student;
/**
 * Site controller
 */
class SiteController extends Controller
    public function actionTest()
    {
        $query=Student::find();
        $result=Common::createPage($query);//生成分页的相关数据
        return $this->render("test",['data'=>$result]);
    }
    public function actionContent()
    {
        //判断是否是ajax请求，渲染页面
        if(Yii::$app->request->isAjax){
            $query=Student::find();
            $result=Common::createPage($query);
            //这里也可以$this->render("info_content",['data'=>$result])，渲染整个页面加载布局文件
            return $this->renderPartial("info_content",['data'=>$result]);
        }
    }

 

考虑到前端有了JQuery插件，没有必要再写个分页类，所以在Common下面写的分页函数：

<?php
/**
 * Created by PhpStorm.
 * User: changshuiwang
 * Date: 2016/7/22
 * Time: 14:38
 */
namespace common\models;

use yii;
use yii\base\Model;
use yii\base\Exception;

class Common extends Model
{
    /**
     * @param $query yii\redis\ActiveQuery对象
     * @return mixed
     * @throws Exception 非法的Page参数抛出异常
     */
    public static function createPage($query)
    {
        $pagesize=10;//每一页显示的大小
        $count=$query->count();//当前页显示的总数
        if(isset($_GET['page'])){
            $current=intval($_GET['page']);//当前页
            if($current*$pagesize>$count && $current*$pagesize>$count+$pagesize){
                //超出了页面的总数
                throw new Exception("非法参数");
            }
            $limit=$pagesize*$current>$count?($count-$pagesize*($current-1)):$pagesize;
            $begin=($current-1)*$pagesize;
            $data=$query->offset($begin)->limit($limit);
        }else{
            $limit=$pagesize>$count?$count:$pagesize;
            $begin=0;
            $data=$query->limit($limit);
        }
        $data=$data->all();//
        $result['data']=$data;
        $result['count']=$count;
        $result['pagesize']=$pagesize;
        $result['begin']=$begin+1;//起始条数
        $result['end']=$begin+$limit;//结束条数
        $result['pagenum']=ceil($count/$pagesize);//页面总数
        $result['current']=$current<=0?1:$current;//当前页
        return $result;
    }
}   

 

主页面test.php：

<?php

/* @var $this yii\web\View */
?>
<style>
    input[type="text"]{
        height:34px;
    }
    .row{
        margin-left: 0px;
    }
</style>
<link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jqPaginator.js"></script>
<script type="text/javascript">
    $(function(){
        $.jqPaginator('#pagination1', {
            totalPages: <?=$data['pagenum']?>,
            visiblePages: <?=$data['pagesize']?>,
            currentPage: <?=$data['current']?>,//响应第一次get请求，指定了page
            onPageChange: function (num, type) {
                if(type!='init'){
                   //页面第一次加载时，type==init
                   $("#load-table").load("/site/content?page="+num+" #load-table");//注意url后面跟的#前面有个空格，这里指定源页面的#load-table部分加载目标页面的id=load-table部分
                }
            }
        });
    })
</script>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> <a href="/site/index" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
            <a href="#" class="tip-bottom">info</a></div>
    </div>
    <div id="w0" class="grid-view">
        <div id="load-table">
            <div class="summary">Showing <b><?=$data['begin']?>-<?=$data['end']?></b> of <b><?=$data['count']?></b> items.
            </div>
            <table class="table table-striped table-bordered">
                <thead>
                <tr><th><a href="/site/info?sort=id" data-sort="id">Id</a></th><th>Username</th><th>Score</th><th>status</th><th>Photo</th><th class="action-column">操作</th></tr>
                </thead>
                <tbody>
                <?php foreach ($data['data'] as $k){
                    ?>
                    <tr data-key="132"><td><?=$k['id']?></td><td><?=$k['username']?></td><td><?=$k['score']?></td><td><?=$k['tag']?></td><td><img src="<?=$k['photo']?>" width="80" height="30" alt=""></td><td><a href="/site/update?id=132" title="Update" aria-label="Update" data-pjax="0"><span class="glyphicon glyphicon-pencil"></span></a><a href="javascript:void(0)" title="View" aria-label="View" data-pjax="0">
                                <span class="glyphicon glyphicon-eye-open" url="132"></span></a></td></tr>
                    <?php
                }
                ?>
                </tbody>
            </table>
        </div>
            <ul class="pagination" id="pagination1"></ul>
    </div>
</div>

 

待异步加载的页面info_content.php：

<?php
/**
 * Created by PhpStorm.
 * User: changshuiwang
 * Date: 2016/8/8
 * Time: 16:16
 */
?>
<div id="load-table">
    <div class="summary">Showing <b><?=$data['begin']?>-<?=$data['end']?></b> of <b><?=$data['count']?></b> items.
    </div>
    <table class="table table-striped table-bordered">
        <thead>
        <tr><th><a href="/site/info?sort=id" data-sort="id">Id</a></th><th>Username</th><th>Score</th><th>status</th><th>Photo</th><th class="action-column">操作</th></tr>
        </thead>
        <tbody>
        <?php foreach ($data['data'] as $k){
            ?>
            <tr data-key="132"><td><?=$k['id']?></td><td><?=$k['username']?></td><td><?=$k['score']?></td><td><?=$k['tag']?></td><td><img src="<?=$k['photo']?>" width="80" height="30" alt=""></td><td><a href="/site/update?id=132" title="Update" aria-label="Update" data-pjax="0"><span class="glyphicon glyphicon-pencil"></span></a><a href="javascript:void(0)" title="View" aria-label="View" data-pjax="0">
                        <span class="glyphicon glyphicon-eye-open" url="132"></span></a></td></tr>
            <?php
        }
        ?>
        </tbody>
    </table>
</div>

这种翻页也有自身的问题，

1.CSS会在页面结构发生变化时，重新改变页面布局，也就是在load加载完之后，会让加载的部分根据当前页面的css改变样式。但JS加载是在文档加载完之后就会绑定事件等，所以load加载完之后就需要重新给load的部分绑定js事件，或者将js事件写在待加载的页面中，将需要加载的页面全部加载过来，而不是指定id的加载，这样js部分也会加载过来，就不会存在事件丢失。

2.js获取到的页面总数，当前页，每页显示的数据条数等都是在页面加载完之后获取到的，如果页面中有存在筛选条件的表单的话就

　　1)需要刷新整个页面来改变js的页面相关信息。

　　2)将分页的js代码在需要load加载的页面中也写一遍，将页面相关信息写在html代码中，js通过html代码获取，这样提交筛选表单的时候，load一次，js就会重新获取页面相关的信息。

 

转载于:https://www.cnblogs.com/water0729/p/5751763.html