//AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右

主要实现是需要将分页中的每个链接都改为AJAX请求

//前端缓存技术：基于javascript传输的数据，只要浏览器没关，都保存在内存中

//实现方法：创建一个数组，将需要缓存的数据保存在数组中，需要使用时调用即可；参加兄弟连PHP项目视频22第45分钟左右

var cache=new Array(); //创建一个用于缓存的数组

function setpage(index,data) {

if (!cache[index]) { //当缓存不存在时，则进行缓存

cache[index]=data;

}else { //缓存存在时，则读取缓存

xxx=cache[index];

}

}

一、控制器中分配显示主页面

public function index(){

$this->assign('time',time());  //页面按需进行查询-分配等就行，不需要对分页数据进行查询

$this->display();

}

注：主页不需要对分页数据进行查询

二、在主页中创建一个DIV容器用于展示分页内容

1、HTML需求

{$time}  //分页以外的数据，这些数据不会受分页的影响

<div id='ajaxpage'>  //分页容器

<div class='page' style='display:none;'><a href="{:U('ajaxPage',array('p'=>1))}" title="">自动点击执行AJAX请求显示第一页内容</a></div>  //需要创建一个链接，用于向AJAX分页自动发送第一页的请求

</div>

注：需要自己创建一个链接，指向分页控制器，并传入p=1；这个链接的作用是用jquery自动点击获取第一页数据；HTML的构造需要和分页的相同，这样jquery的AJAX请求才能正常获取a标签信息；如这里的构造是class=page里的a，与分页链接相同

2、JQuery需求

var cache=new Array(); //--创建一个用于缓存的数组，用于前端JS数据缓存

//这是分页中各个分页的AJAX请求

$(function(){

$('#ajaxpage').on('click','.page a',function () { //使用on()进行动态绑定事件；非动态是$('.page a').click()；on()里的第二个参数是AJAX中动态绑定的选择器，而$('#ajaxpage')选取AJAX外的合适的DOM，通常是包 过AJAX内容的那个DOM

var url=$(this).attr('href');   //取得分页a标签链接地址，正好是要提交的控制器和传参：Index/ajaxPage/p/1

if (cache[url]) { //--如果缓存存在，则读取缓存

$('#ajaxpage').html(cache[url]);

}else { //否则进行ajax请求

$.ajax({

type: "GET",

url:url,    //请求URL

success:function(data){

$('#ajaxpage').html(data);     //将分页控制器输出的模版加载到容器中

cache[url]=data; //--将返回的数据存入缓存

//alert(url);  //开启这里可以判断缓存是否生效

}

});

}

return false;     //使a标签失效，防止页面跳转

});

});

注：必须用on进行动态绑定；接收返回的数据直接使用html()加载进模版指定的位置，不用对数据进行HTML格式组合

//需要先使用trigger当页面加载完自动点击一次创建的链接，完成首页数据的AJAX请求

$(function () {

$('.page a').trigger('click');

});

注：需要写在AJAX请求代码的下面；模拟点击的时候，就会请求上面的AJAX了

三、控制器中分页查询

public function ajaxPage(){

$question = M("question");

import('ORG.Util.Page'); //引入分页类

$count = $question->where('question_category = 49 AND status = 0')->count(); //查询出总条数

$page=new Page($count,10); //$count:总条数，10：每页显示条数$page->lastSuffix = false;

//设置分页类，这里设置的是最下面那排分页数据的样式

$Page->rollPage = 3; //页面显示的页数，默认是5

$page->setConfig('header','条记录');  //设置显示的文字，这5项都使用的默认值

$page->setConfig('prev','上一页');

$page->setConfig('next','下一页');

$page->setConfig('first','首页');

$page->setConfig('last','尾页');

$page->setConfig('theme',"<b>共%totalRow%%header% %nowPage%/%totalPage% 页 %first% %prePage% %upPage% %linkPage% %downPage% %nextPage% %end%</b>"); //设置显示的具体内容，可以在这里使用HTML CSS等样式

$limit=$page->firstRow.','.$page->listRows; //调用分页类的属性；确定查询的数据是从第几个开始取，取出多少个

$list = $question->field('question_price,question_id,question_startTime,question_name,question_title,pay')->where('question_category = 49 AND status = 0')->order('question_startTime DESC')->limit($limit)->select();//使用field()方法取出需要的字段，order()方法排 序，limit()方法决定取出的数据

$this->list=$list; //分配给模版，等同于assign()

$this->assign('page',$page->show()); //将分页类分配给模版

$this->display();  //这里直接使用display()而不是ajaxReturn()

}

注：这里就只对分页内容进行查询，并使用display()输出模版，而不是ajaxReturn()返回数据

四、分页内容显示

<foreach name='list' item='v'>

<tr>

<td>{$v['question_price']}</td>

<td>{$v['pay']}</td>

<td>{$v['question_title']}</td>

<td>{$v['question_name']}</td>

<td>{$v['question_startTime']|date='Y-m-d H:i:s',###}</td>

<td><a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'1','id'=& gt;$v['question_id']))}">退回</a>/<a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'2','id'=& gt;$v['question_id']))}">通过</a>/<a href="{:U('uptStatus',array('oldSta'=>'0','status'=>'8','id'=>$v['question_id']))}" onclick='return confirm("你确定删除吗？")'>回收站</a></td>

</tr>

</foreach>

<tr>

<td colspan="6" class='page'>  //这里的class=page和首次点击的结构相同

{$page}

</td>

</tr>

注：这里的HTML只要分页的标签即可，不能有<html><body>这些标签

结 语：这样的好处是将分页内容以模版形式构建，而不需要在AJAX请求的回调函数中构建，JS里写HTML各种蛋疼啊~因为是模拟点击获取的分页内容，所以 在第一次页面加载完成时分页内容的显示会稍有延迟；当然，也可以在首页中就将分页第一页查询出来分配给模版并显示，但这样代码就会重复很多；也可以在后台 将分页查询进行封装，前台使用<include>包含分页模版，这就看个人需求了

ThinkPHP AJAX分页及JS缓存的应用的更多相关文章

  1. thinkphp ajax分页

    临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: 复制代码 <?php namespace Fenye\libs; /** file: page.class.php ...

  2. THINKPHP ajax分页示例

    先把框架的page类改造一下 路径在ThinkPHP/Library/Think/Page.class.php文件 添加一个方法 ajax_show 代码如下 <?php /** * 组装分页链 ...

  3. ajax 分页点击数据缓存

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. thinkphp ajax分页加载更多最简单的实现方法

    <div class="li_list"> <volist name="list" id="vo"> <div ...

  5. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  6. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  7. Thinkphp+Ajax带关键词搜索列表无刷新分页实例

    Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...

  8. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

  9. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

随机推荐

  1. C#下实现的基础K-MEANS多维聚类

    资源下载 #本文PDF版下载 C#下实现的基础K-MEANS多维聚类PDF #本文代码下载 基于K-Means的成绩聚类程序 前言 最近由于上C # 课的时候,老师提到了-我们的课程成绩由几个部分组成 ...

  2. nyoj-1367-河南省第十一届省赛-E物流配送-最小费用流

    1367-物流配送 内存限制:128MB 时间限制:8000ms 特判: No通过数:1 提交数:1 难度:4 题目描述: 物流配送是物流活动中一种非单一的业务形式,它与物品流动.资金流动紧密结合.备 ...

  3. HDOJ1009

    #include "iostream" #include "algorithm" #include "cstdio" using names ...

  4. oracle12c新特点之可插拔数据库（Pluggable Database,PDB）

    1.    12c PDB新特点的优势 1)    可以把多个PDB集成进一个平台. 2)    可以快速提供一个新的PDB或一个已有PDB的克隆. 3)    通过拔插技术,可以快速把存在的数据库重 ...

  5. DB2默认的事务及并发锁机制

    今天有点时间,试验了一下DB2的并发锁机制,结果,和MSSQL的差不多:1.DB2的缺省行为,事务以可执行的SQL开始,以COMMIT或ROLLBACK结束:2.DB2缺省是否提交,以工具的不同而不同 ...

  6. [LeetCode] 268. Missing Number ☆(丢失的数字)

    转载:http://www.cnblogs.com/grandyang/p/4756677.html Given an array containing n distinct numbers take ...

  7. Linux C ftruncate 函数清空文件注意事项（要使用 lseek 重置偏移量）

    转载:http://blog.csdn.net/a_ran/article/details/43562429 int truncate(const char *path, off_t length); ...

  8. Access-Control-Allow-Origin实现跨域访问 跨域

    总结:跨域的get,post请求 后台可以设置 Access-Control-*相关的参数,让浏览器支持. // 指定允许其他域名访问 header('Access-Control-Allow-Ori ...

  9. 072——VUE中vuex之使用mutations修改购物车仓库数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. sgu 129 Inheritance 凸包,线段交点,计算几何 难度:2

    129. Inheritance time limit per test: 0.25 sec. memory limit per test: 4096 KB The old King decided ...