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 ...
随机推荐
- canvas刮刮卡
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- html5--1.20 课程小结与若干点补充
html5--1.20 课程小结与若干点补充 学习要点: 1.第一章HTML5基础知识做一个小结2.对本章课程中部分内容做几点补充 课程小结 对本章的知识点做一个简单的回顾,并对其中个别知识点做若干补 ...
- jvm file.encoding 属性引起的storm/hbase乱码
1. 问题 今天为storm程序添加了一个计算bolt,上线后正常,结果发现之前的另一个bolt在将中文插入到hbase中后查询出来乱码.其中字符串是以UTF-8编码的url加密串,然后我使用的URL ...
- PS滤镜— —波浪效果
clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...
- Spring笔记02(3种加载配置文件的方式)
1.不使用Spring的实例: 01.Animal接口对应的代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃饭 St ...
- 关于STM32中GPIO的8种工作模式
CSDN:http://blog.csdn.net/l20130316 博客园:http://www.cnblogs.com/luckyalan/ 1 综述 I/O口是单片机中非常常用的外设,STM3 ...
- 数据库小记:根据指定名称查询数据库表名及根据指定名称查询数据库所有表中的字段名称(支持mysql/postgre)
意:本篇文章仅适用于mysql和postgre这两种数据库 1.查询数据库中所有表名及对应表的详细信息 select * from INFORMATION_SCHEMA.tables 2.根据指定名称 ...
- 洛谷【P4883】mzf的考验
浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...
- UML统一建模语UML2和EnterpriseArchitect
其实前面的UML统一建模语言(一)所描述的都是UML1的内容,现在咱们聊一聊UML2. UML2.x完全建立在UML1.x基础之上,大多数的UML1.x模型在UML2.x中都可用.但UML2.x在结构 ...
- CAS单点登录学习(一):服务端搭建
下载先在网上下载cas-server-3.5.2,将里面的cas-server-webapp-3.5.2.war放到tomcat的webapps目录下. https设置cas单点登默认使用的是http ...