一,写在最开始:ajax分页的原理,是利用了js的ajax执行请求,获取分页list和分页page 【代码块】,去替换页面显示数据的【代码块】

技术:js的ajax + TP3.2的fetch("Index/data")技术,仅此而已。

1、在Library\Think\ 目录下直接加入以下代码:Ajaxpage.class.php

<?php
/**
* ajax分页类,有namespace,使用方法:
* 控制器直接$ajaxpage = new \Think\Ajaxpage($p1,$p2,$p3);
* @param unknowtype
* @return return_type
* @author xzz 2018年4月27日上午8:49:19
*/
namespace Think; class Ajaxpage {
// 分页栏每页显示的页数
public $rollPage = 5;
// 页数跳转时要带的参数
public $parameter ;
// 默认列表每页显示行数
public $listRows = 20;
// 起始行数
public $firstRow ;
// 分页总页面数
protected $totalPages ;
// 总行数
protected $totalRows ;
// 当前页数
protected $nowPage ;
// 分页的栏的总页数
protected $coolPages ;
// 分页显示定制
protected $config = array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%');
// 默认分页变量名
protected $varPage; public function __construct($totalRows,$listRows='',$ajax_func,$parameter='') {
$this->totalRows = $totalRows;
$this->ajax_func = $ajax_func;
$this->parameter = $parameter;
$this->varPage = 'p' ;
if(!empty($listRows)) {
$this->listRows = intval($listRows);
}
$this->totalPages = ceil($this->totalRows/$this->listRows); //总页数
$this->coolPages = ceil($this->totalPages/$this->rollPage);
$this->nowPage = !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;
if(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {
$this->nowPage = $this->totalPages;
}
$this->firstRow = $this->listRows*($this->nowPage-1);
} public function nowpage($totalRows,$listRows='',$ajax_func,$parameter='') {
$this->totalRows = $totalRows;
$this->ajax_func = $ajax_func;
$this->parameter = $parameter;
$this->varPage = 'p' ;
if(!empty($listRows)) {
$this->listRows = intval($listRows);
}
$this->totalPages = ceil($this->totalRows/$this->listRows); //总页数
$this->coolPages = ceil($this->totalPages/$this->rollPage);
$this->nowPage = !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;
if(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {
$this->nowPage = $this->totalPages;
}
$this->firstRow = $this->listRows*($this->nowPage-1); return $this->nowPage;
} public function setConfig($name,$value) {
if(isset($this->config[$name])) {
$this->config[$name] = $value;
}
} public function show() {
if(0 == $this->totalRows) return '';
$p = $this->varPage;
$nowCoolPage = ceil($this->nowPage/$this->rollPage);
$url = $_SERVER['REQUEST_URI'].(strpos($_SERVER['REQUEST_URI'],'?')?'':"?").$this->parameter;
$parse = parse_url($url);
if(isset($parse['query'])) {
parse_str($parse['query'],$params);
unset($params[$p]);
$url = $parse['path'].'?'.http_build_query($params);
}
//上下翻页字符串
$upRow = $this->nowPage-1;
$downRow = $this->nowPage+1;
if ($upRow>0){
$upPage="<a class='ajaxify' id='big' href='JavaScript:".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";
}else{
$upPage="";
} if ($downRow <= $this->totalPages){
$downPage="<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";
}else{
$downPage="";
}
// << < > >>
if($nowCoolPage == 1){
$theFirst = "";
$prePage = "";
}else{
$preRow = $this->nowPage-$this->rollPage;
$prePage = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";
$theFirst = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(1)' >".$this->config['first']."</a>";
}
if($nowCoolPage == $this->coolPages){
$nextPage = "";
$theEnd="";
}else{
$nextRow = $this->nowPage+$this->rollPage;
$theEndRow = $this->totalPages;
$nextPage = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";
$theEnd = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$theEndRow.")' >".$this->config['last']."</a>";
}
// 1 2 3 4 5
$linkPage = "";
for($i=1;$i<=$this->rollPage;$i++){
$page=($nowCoolPage-1)*$this->rollPage+$i;
if($page!=$this->nowPage){
if($page<=$this->totalPages){
$linkPage .= " <a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$page.")'> ".$page." </a>";
}else{
break;
}
}else{
if($this->totalPages != 1){
$linkPage .= " <span class='current'>".$page."</span>";
}
}
}
$pageStr = str_replace(
array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),
array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);
return $pageStr;
} } ?>

2、TP3.2的控制器中:ajax_action 是ajax请求的路由,action是页面请求的路由。我们直接访问action

/**
* 用户行为列表,自定义的ajax分页,使用方式不应该是页面访问,
* 而应该是js的onload完成进行ajax初始化访问
* @author xuzhengzong 2018/04/28
*/
public function ajax_action($model='Action'){
//获取列表数据
//统计要查询数据的数量
$page_size = 10; //评论固定10条
$page = intval($_REQUEST['p']);
$id = intval($_REQUEST['id']);
if(empty($page))$page = 1;
$limit = (($page-1)*$page_size).",".$page_size ; //让分页支持多条件查询 -- xuzhengzong 2018/04/28
$where['status'] = array('gt',-1);
//$_REQURST['cond'] && $where['cond'] = $_REQURST['cond']; //多条件查询判断
$list = M($model)->where($where)->order('id desc')->limit($limit)->select();
$count[0]['count'] = M($model)->where($where)->count("*");
//end $param = '';
//$map['status'] = array('gt',1);
$Page = new \Think\Ajaxpage($count[0]['count'],$page_size, index,$param);// 实例化分页类 传入总记录数和每页显示的记录数(25)
$show = $Page->show();// 分页显示输出
foreach($list as $k=>$v){
$list[$k]['status_text'] = $v['type']==1?'启用':'禁用';
} $this->assign('_page',$show);
$this->assign('_list', $list);
$html['content'] = $this->fetch('Ajax/action');
$this->ajaxReturn($html);
}
/**
* 用户行为列表
* @author
*/
public function action(){
//获取列表数据
$Action = M('Action')->where(array('status'=>array('gt',-1)));
$this->meta_title = '用户行为';
$this->display();
}

3、html && js:下面代码我们知道,页面document加载完,执行index(1)的方法请求第一个页面的数据list和page分页

<!-- 数据列表+ajax分页 -->
<div id="list" class="list"> </div> <script type="text/javascript">
/* 初始化加载action_ajax分页数据 --xuzhengzong 2018/04/28 */
var init_id = 1;
index(init_id); //初始化页面 init_id==1
function index(id){
var id = id;
//把数据传递到要替换的控制器方法中
$.ajax({
url:'/index.php/Admin/User/ajax_action',
type:"GET",
async:false,
dataType:"JSON",
//data:{'p':id,'id':deal_id},
data:{'p':id},
success:function(data){
$("#list").replaceWith(data.content); //html块替换html的div
},
error:function(data){
console.log("4:ajax not run~");
}
});
}
</script>

4、核心:上面【data.content】,是加载下面的Ajax/action.html进行替换的。

Ajax/action.html:

<div id="list" class="list">
<!-- 用户行为ajax分页示例demo页面 -->
<div class="data-table" id="data-table">
<table class="">
<thead>
<tr>
<th class="row-selected row-selected"><input class="check-all" type="checkbox"/></th>
<th class="">编号</th>
<th class="">标识</th>
<th class="">名称</th>
<th class="">类型</th>
<th class="">规则</th>
<th class="">状态</th>
<th class="">操作</th>
</tr>
</thead>
<tbody>
<volist name="_list" id="vo">
<tr>
<td><input class="ids" type="checkbox" name="ids[]" value="{$vo.id}" /></td>
<td>{$vo.id} </td>
<td>{$vo.name}</td>
<td><a href="{:U('editAction?id='.$vo['id'])}">{$vo.title}</a></td>
<td><span>{:get_action_type($vo['type'])}</span></td>
<td>{$vo.remark}</td>
<td>{$vo.status_text}</td>
<td><a href="{:U('User/editAction?id='.$vo['id'])}">编辑</a>
<a href="{:U('User/setStatus?Model=action&ids='.$vo['id'].'&status='.abs(1-$vo['status']))}" class="ajax-get">{$vo.status|show_status_op}</a>
<a href="{:U('User/setStatus?Model=action&status=-1&ids='.$vo['id'])}" class="confirm ajax-get">删除</a>
</td>
</tr>
</volist>
</tbody>
</table> </div>
<!-- 分页 -->
<div class="page">{$_page}</div>
<!-- /分页 --> </div>

5、重点讲解 为什么 要存在Ajax/action.html文件

我们知道TP3.2的display()是输出模板,而fetch()是接手模板,但是不渲染。 完了,还没看明白自行查看TP的fetch()方法。

6、效果: 路由没带p参数,跳转到第二页咯。

【TP3.2】TP3.2下实现ajax分页(原创+亲测可用)的更多相关文章

  1. win10环境下Android studio安装教程----亲测可用

    这段时间学习了一下Android的基本开发,发现Google已经停止了对eclipse的支持,并开发了自己的Android开发工具--Android Studio,于是想安装一下Android Stu ...

  2. windows下的java项目打jar分别编写在windows与linux下运行的脚本( 本人亲测可用!)

    前言: 最近公司做了一个工具,要将这个工具打包成一个可运行的程序,编写start.bat和start.sh在windows和linux下都可以运行. 在网上找了很多资料,最后终于找到一个可靠的资料,记 ...

  3. MAC系统下破解WIFI密码(亲测可用,含wifi密码字典)

    出差第二天,住的小区因为疫情被封,宿舍又没有wifi,看着附近满满的WIFI信号列表,wifi万能钥匙却一个都连接不上,心中一万匹CNM...于是电脑连上手机热点,然后各种折腾,终于破解了一个隔壁的w ...

  4. Comet4J推技术在SSHE三大框架中应用-linux下亲测可用

    Comet4J(Comet for Java)是一个纯粹基于AJAX(XMLHTTPRequest)的服务器推送框架,消息以JSON方式传递,具备长轮询.长连接.自动选择三种工作模式. 下载地址 co ...

  5. 原创:【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】

    如标题:我想在ajax的header头增加自定义Token进行跨域api认证并调用,api使用laravel5编写,如何实现? 首先,了解下CORS简单请求和复杂请求.  -- CORS简单请求 -- ...

  6. Ubuntu下搭建高匿HTTP代理(亲测可用)

    功能用途 我们在生活中见过各种代理,比如我们距离火车站较远,我们可以选择通过距离最近的火车票代售点来购买火车票.又比如商品代理商,我们拿不到厂家的直接或者,可以通过厂家授权的代理经销商来获得产品.代理 ...

  7. 【亲测可用,亦可配置同一平台的不同账号,例如阿里云的两个不同账号】Windows下Git多账号配置,同一电脑多个ssh-key的管理

    Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章<Git-TortoiseGit完整配置流程>的拓展,所以需要对上一篇文章有所了解,当然直接 ...

  8. Linux 下 zip 文件解压乱码解决方案,ubuntu16.10亲测可用

    文章来源: https://www.zhihu.com/question/20523036 今天邮件中收到了一个压缩文件,解压后却是乱码,从网上也找了几个方法,目前这个方法还是比较可靠的,如下所示: ...

  9. linux下的tomcat开机自启动(亲测),更改静态ip

    开机自启动Tomcat: 1.修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自定的开机启动程序,可以在里面添加想在系统启动之后执行的脚本或者脚本执行命令 ...

随机推荐

  1. LDR 和MOV 指令区别

    ARM是RISC结构,数据从内存到CPU之间的移动只能通过L/S指令来完成,也就是ldr/str指令.比如想把数据从内存中某处读取到寄存器中,只能使用ldr比如:ldr r0, 0x12345678就 ...

  2. Linux扩展文件分区

    **************操作之前请看章节6,看系统是否支持LVM分区管理方式*************** 1:新增磁盘 插入新的磁盘,比如物理机可以直接在卡槽插入,虚拟机可以在控制台添加磁盘或者 ...

  3. Softmax 函数的特点和作用是什么?

    作者:张欣链接:https://www.zhihu.com/question/23765351/answer/98897364来源:知乎著作权归作者所有,转载请联系作者获得授权. softmax 回归 ...

  4. ZOJ 3456 Traveler Nobita 最小生成树

    Traveler Nobita Time Limit: 2 Seconds      Memory Limit: 65536 KB One day, Nobita used a time machin ...

  5. ASP入门(二十二)-连接数据库

    ADO 简介 在 ASP 中访问数据库使用的 ADO 组件. ADO 是一项微软的技术. ADO 指 ActiveX 数据对象(ActiveX Data Objects). ADO 是微软的 Acti ...

  6. Web - TCP的三次握手

    在TCP/IP协议中,TCP协议提供可靠的连接服务,採用三次握手建立一个连接. 第一次握手:建立连接时,client发送syn包(syn=j)到server,并进入SYN_SENT状态,等待serv ...

  7. myeclipse单元测试

    步骤:1.新建new-other 2.选择Junit Test Case 3.注意红线圈出部分 4.选择需要测试的方法5.Finish后出现如下 示例代码: package com.jrgc.dao; ...

  8. Lanczos Algorithm and it's Parallelization Stragegy

    由于写了降维的一个系列算法分析,本来以为对这个Lanczos算法会理解一点,但是还是不知道讲了什么,最多的就是会如何调用,然后出结果,所以就翻译官网的相关内容.本篇翻译来自Dimensional Re ...

  9. Centos7中安装Python3

    环境:CentOS 7 1. 安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-dev ...

  10. Mina.Net实现的UDP多路广播

    主要用于未确定主机地址的情况下,可以使用多路广播和服务端通信,下面是官方提供的DEMO. using System; using System.Net; using System.Net.Socket ...