一,写在最开始: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. scp命令:服务器间远程复制代码

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...

  2. Java中 CopyOnWriteArrayList 的使用

    java中,List在遍历的时候,如果被修改了会抛出java.util.ConcurrentModificationException错误. 看如下代码: import java.util.Array ...

  3. windows取证

    工具网站 : http://www.ntsecurity.nu/toolbox/ 命令行历史 :命令行模式 CMD 中使 doskey /history 命令可以显示前面输入的命令情况(例如使用 cl ...

  4. CSS-文本垂直居中

    文本水平居中可以将text-align设置为center即可,垂直居中的话如果是单纯的设置vertical-align是没办法单独设置成功的,垂直居中的文字分为单行文本和多行文本,主要是两种不同的实现 ...

  5. 关于UI设计中的交互软件Axure7.0运用

    Axure RP是一个专业的快速原型设计工具.让负责定义需求和规格.设计功能和界面的人员能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档. 作为专业的原型设计工具,它能快速.高效的 ...

  6. Java奇淫巧技之Lombok

    http://blog.csdn.net/ghsau/article/details/52334762

  7. 战斗bug技巧全攻略

    程序员不是有一幅这样的对联吗 上联:一个项目两部电脑三餐盒饭只为四千工资搞得五脏俱损六神无主仍然七点起床八点开会处理九个漏洞十分辛苦: 下联:十年编码九年加班八面无光忙的七窍生烟到头六亲不认五体投地依 ...

  8. OpenNebula学习第三节之虚拟机管理

    一.背景 已经安装好OpenNebula-Front-end 已经安装好OpenNebula Node 已经把Node注册到Front-end 二.目标 看过第一.二节的同学们可能已经知道我的整个环境 ...

  9. IDEA 不能显示项目里的文件结构

    方法一: 关闭IDEA, 然后删除项目文件夹下的.idea文件夹 重新用IDEA工具打开项目 方法二: 菜单:File -> Invalidate Caches / Restart

  10. OAuth2 Demo PHP

    OAuth2 Demo PHP 此应用程序的目的是演示OAuth2.0客户端和服务器之间的工作流.如果这是你第一次来这里,试图尝试的现场演示让OAuth2.0流更好的感觉. experimenting ...