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就会重新获取页面相关的信息。
yii2.0下,JqPaginator与load实现无刷新翻页的更多相关文章
- yii2.0下,JqPaginator与Pjax实现无刷新翻页
控制器部分 <?php namespace backend\controllers; use common\models\Common; use Yii; use yii\base\Contro ...
- ajax无刷新翻页后,jquery失效问题的解决
例如 $(".entry-title a").click(function () { 只对第一页有效, 修改为 $(document).on('click', ".e ...
- Yii2.0 下的 load() 方法的使用
一 问题 最近在使用 Yii2.0,遇到一个 bug:在 /models/OrderDetail.php add() 方法中调用 load() 方法加载数据,却加载不了. public functio ...
- TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- Yii2.0 下使用 composer 安装七牛
最近在捣鼓一个网站,要上传图片,于是选择了七牛.由于Yii2.0框架本身并不具有七牛用来上传图片的接口,只能自己动手给Yii2.0框架安装七牛了. 首先在根目录下的 composer.json 进行配 ...
- knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页
Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例 ...
- Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
- Yii2.0连接多个数据库
Yii2.0连接多个数据库 一个项目根据需要会要求连接多个数据库,这里记录下实际项目中的操作流程.包括对数据库连接的配置以及如何生成模型文件,在控制器中加以运用. 一.配置 打开数据库配置文件c ...
- yii2.0的学习之旅(一)
一. 通过composer安装yii2.0项目 *本文是根据您已经安装了composer (1)跳转到项目根目录 cd /xxxx/www (2)下载插件 composer global requir ...
随机推荐
- LightOJ 1070 Algebraic Problem:矩阵快速幂 + 数学推导
题目链接:http://lightoj.com/volume_showproblem.php?problem=1070 题意: 给你a+b和ab的值,给定一个n,让你求a^n + b^n的值(MOD ...
- smack
XMPP/Smack/Openfire javax.net.ssl.SSLException: Received fatal alert: internal_error 解决: 1.在链接openfi ...
- ACM学习历程—HDU1028 Ignatius and the Princess III(递推 || 母函数)
Description "Well, it seems the first problem is too easy. I will let you know how foolish you ...
- ACM学习历程—HDU 1059 Dividing(dp && 多重背包)
Description Marsha and Bill own a collection of marbles. They want to split the collection among the ...
- bzoj 3771: Triple 快速傅里叶变换 FFT
题目大意: 给出\(n\)个互不相同的物品,每个物品有价值\(x_i(x_i \leq 40000)\)如果可以从中取一个或两个或三个物品.问能够组合出来的所有价值和对应的方案数,全部输出.取值时,\ ...
- 洛谷P1941飞扬的小鸟——细节DP
题目:https://www.luogu.org/problemnew/show/P1941 此题主要注意许多细节,详见代码. 代码如下: #include<iostream> #incl ...
- exosip 和 pjsip 简介
oSIP oSIP的开发开始于2000年7月,第一个版本在2001年5月发 布,到现在已经发展到3.x了.它采用ANSI C编写,而且结 构简单小巧,所以速度特别快,它并不提供高层的SIP会话 控制 ...
- C++的函数重载与C参数个数不一致时的编译
C++的函数重载意味着函数名和返回值类型相同,但是参数个数和/或类型不同.在编译过程中编译器一般会把各个参数的类型连接到函数名内组成新的函数名,以区分各个重载函数. C语言不支持函数重载.但是有时候虽 ...
- Spring入门第二十课
返回通知,异常通知,环绕通知 看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int add(in ...
- 面试问题 - C# 接口和抽象类的区别
这个问题基本上可以说是 面试时的必问问题 C# 中的接口和抽象类 相同点: 1. 都不能直接实例化,都可以通过继承实现其抽象方法 2. 都是面向抽象编程的技术基础,实现了诸多的设计模式 不同点: 1. ...