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就会重新获取页面相关的信息。