【TP3.2】TP3.2下实现ajax分页(原创+亲测可用)
一,写在最开始: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分页(原创+亲测可用)的更多相关文章
- win10环境下Android studio安装教程----亲测可用
这段时间学习了一下Android的基本开发,发现Google已经停止了对eclipse的支持,并开发了自己的Android开发工具--Android Studio,于是想安装一下Android Stu ...
- windows下的java项目打jar分别编写在windows与linux下运行的脚本( 本人亲测可用!)
前言: 最近公司做了一个工具,要将这个工具打包成一个可运行的程序,编写start.bat和start.sh在windows和linux下都可以运行. 在网上找了很多资料,最后终于找到一个可靠的资料,记 ...
- MAC系统下破解WIFI密码(亲测可用,含wifi密码字典)
出差第二天,住的小区因为疫情被封,宿舍又没有wifi,看着附近满满的WIFI信号列表,wifi万能钥匙却一个都连接不上,心中一万匹CNM...于是电脑连上手机热点,然后各种折腾,终于破解了一个隔壁的w ...
- Comet4J推技术在SSHE三大框架中应用-linux下亲测可用
Comet4J(Comet for Java)是一个纯粹基于AJAX(XMLHTTPRequest)的服务器推送框架,消息以JSON方式传递,具备长轮询.长连接.自动选择三种工作模式. 下载地址 co ...
- 原创:【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】
如标题:我想在ajax的header头增加自定义Token进行跨域api认证并调用,api使用laravel5编写,如何实现? 首先,了解下CORS简单请求和复杂请求. -- CORS简单请求 -- ...
- Ubuntu下搭建高匿HTTP代理(亲测可用)
功能用途 我们在生活中见过各种代理,比如我们距离火车站较远,我们可以选择通过距离最近的火车票代售点来购买火车票.又比如商品代理商,我们拿不到厂家的直接或者,可以通过厂家授权的代理经销商来获得产品.代理 ...
- 【亲测可用,亦可配置同一平台的不同账号,例如阿里云的两个不同账号】Windows下Git多账号配置,同一电脑多个ssh-key的管理
Windows下Git多账号配置,同一电脑多个ssh-key的管理 这一篇文章是对上一篇文章<Git-TortoiseGit完整配置流程>的拓展,所以需要对上一篇文章有所了解,当然直接 ...
- Linux 下 zip 文件解压乱码解决方案,ubuntu16.10亲测可用
文章来源: https://www.zhihu.com/question/20523036 今天邮件中收到了一个压缩文件,解压后却是乱码,从网上也找了几个方法,目前这个方法还是比较可靠的,如下所示: ...
- linux下的tomcat开机自启动(亲测),更改静态ip
开机自启动Tomcat: 1.修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自定的开机启动程序,可以在里面添加想在系统启动之后执行的脚本或者脚本执行命令 ...
随机推荐
- go语言之进阶篇单向channel的应用 (生产者,消费者模型)
1.单向channel的应用 示例: package main import ( "fmt" ) //此通道只能写,不能读 func producer(out chan<- ...
- 在SharePoint Server 2010中更改“我的网站”
在安装SharePoint Server 2010的时候,创建的第一个站点是一个“NetBIOS名称”的网站,而这个时候,“我的网站”(或称“个人网站”),也是基于此NetBIOS名称的,例如,如果你 ...
- 阅读日志: 微信小程序的风口只有一天?
原文地址: 小程序的风口只有一天?难道我们用的是假的小程序 http://xudanei.baijia.baidu.com/article/755506 原文摘要: #,小程序的趋势,从1月10日至1 ...
- RxJava RxLifecycle 生命周期 内存泄漏 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Android教材 | 第三章 Android界面事件处理(一)—— 杰瑞教育原创教材试读
前 言 JRedu Android应用开发中,除了界面编程外,另一个重要的内容就是组件的事件处理.在Android系统中,存在多种界面事件,比如触摸事件.按键事件.点击事件等.在用户交互过程中, ...
- eclipse 创建普通maven项目
- http://blog.csdn.net/u014595019/article/details/52805444
http://blog.csdn.net/u014595019/article/details/52805444 tensorflow笔记系列: (一) tensorflow笔记:流程,概念和简单代码 ...
- Eclipse CDT 插件列表
http://www.bestplugins.com/software/eclipse-c-plugin.html
- 使用Nexus管理maven仓库,setting文件理解
来到新公司对很多陌生的技术一头雾水,以前在工作中没有真正使用过maven,于是强迫自己蛋定下来一个一个的突破,下面是我对maven的setting配置文件的理解,由于是现学的,难免可能会理解偏差,还请 ...
- 3611: [Heoi2014]大project|树形DP|虚树
构建出虚树然后DP统计答案 自己写的DP太傻QAQ,各种WA 膜了一发PoPoQQQ大爷的DP方法 mxdis,mndis分别表示到当前点近期和最远的被选出来的点的距离 mx,mn分别表示在以当前点为 ...