yii2.0下,JqPaginator与Pjax实现无刷新翻页
控制器部分
<?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()
{
if(Yii::$app->request->isPjax){
$query=Student::find();
$result=Common::createPage($query);
return $this->renderPartial("info_content",['data'=>$result]);
}else{
//如果不是Pjax请求
$this->redirect("/site/test?page=$_GET[page]");
}
}
Common部分同上一篇 http://www.cnblogs.com/water0729/p/5751763.html
主页面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-pjax-master/jquery-1.9.1.min.js"></script>//Pjax要求的jQuery版本为1.9
<script type="text/javascript" src="/js/jqPaginator.js"></script>
<script src="/js/jquery-pjax-master/jquery.pjax.js"></script>//引入Pjax文件
<script type="text/javascript">
$(function(){
$.jqPaginator('#pagination1', {
totalPages: <?=$data['pagenum']?>,
visiblePages: <?=$data['pagesize']?>,
currentPage: 1,
onPageChange: function (num, type) {
if(type!='init'){
$.pjax({url: '/site/content?page='+num, container: '#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 load-table">
<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
同上一篇http://www.cnblogs.com/water0729/p/5751763.html
yii2.0下,JqPaginator与Pjax实现无刷新翻页的更多相关文章
- yii2.0下,JqPaginator与load实现无刷新翻页
JqPaginator下载地址http://jqpaginator.keenwon.com/ 控制器部分: <?php namespace backend\controllers; use co ...
- ajax无刷新翻页后,jquery失效问题的解决
例如 $(".entry-title a").click(function () { 只对第一页有效, 修改为 $(document).on('click', ".e ...
- TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- Yii2.0 下使用 composer 安装七牛
最近在捣鼓一个网站,要上传图片,于是选择了七牛.由于Yii2.0框架本身并不具有七牛用来上传图片的接口,只能自己动手给Yii2.0框架安装七牛了. 首先在根目录下的 composer.json 进行配 ...
- Yii2.0 下的 load() 方法的使用
一 问题 最近在使用 Yii2.0,遇到一个 bug:在 /models/OrderDetail.php add() 方法中调用 load() 方法加载数据,却加载不了. public functio ...
- 使用 pjax 实现无刷新切换页面
一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- typecho开启pjax,ajax,无刷新
1.引入jquery和pjax 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 https://files.cnblogs.com/files/fan-bk/pjax. ...
随机推荐
- Struts2 小例子 --第二弹
struts-2.5.14.1-all.zip 下载后文件夹说明 apps:war格式的例子文件 lib:引用jar包文件 src:源码文件 docs:帮助文档 小例子: 1.创建web工程:str ...
- TP框架控制器和对应方法创建
控制器和对应方法创建 控制器是MVC模式中的核心,TP默认有一个控制器: Index控制器里面有一个操作方法:Index 我们在访问http://localhost:8080/Thinkphp ...
- STL容器特征总结与迭代器失效
Vector 内部数据结构:连续存储,例如数组. 随机访问每个元素,所需要的时间为常量. 在末尾增加或删除元素所需时间与元素数目无关,在中间或开头增加或删除元素所需时间随元素数目呈线性变化. 可动态增 ...
- Codeforces Gym 101190 NEERC 16 .D Delight for a Cat (上下界的费用流)
ls是一个特别堕落的小朋友,对于n个连续的小时,他将要么睡觉要么打隔膜,一个小时内他不能既睡觉也打隔膜 ,因此一个小时内他只能选择睡觉或者打隔膜,当然他也必须选择睡觉或打隔膜,对于每一个小时,他选择睡 ...
- JQuery Mobile的页面
1.JQuery Mobile的页面结构如下图: page:是在浏览器中显示的页面 header:创建页面上方的工具栏(常用于标题和搜索按钮) content:定义了页面的内容,比如文本, 图片,表单 ...
- "The object cannot be deleted because it was not found in the ObjectStateManager."
最近优化EF的性能时遇到一个问题, 当在EF生成的Entityes的构造里加上: this.protocolnodes.MergeOption = MergeOption.NoTracking;thi ...
- Pmod使用的4种模式
引言 多年以来,一直存在标准泛滥的现象,而我们电子业尤其严重.您是否曾经想过,为什么我们对有些奇怪的数字或测量计的东西建立标准?关于航天飞机的固体燃料火箭推进器的直径是否真的源自于马屁股的宽度的讨论非 ...
- alter table *** add constraint *** 用法---约束
1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是分空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码 要对一个列加主键,列名为id,表名为emp 格式为:a ...
- appium连真机问题
adb devices -l 后出现:List of devices attached 解决方法:用管理员身份运行以上命令 adb kill-server adb start-server adb d ...
- 导出数据到EXCEL并生成多个Sheet
一.准备工作 引用:Microsoft.Office.Interop.Excel 准备多个DataTable数据添加到DataSet中. 二.代码 public void CreateExcel(Da ...