一,写在最开始: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==1function 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分页(原创+亲测可用)
原文地址:https://www.cnblogs.com/xuzhengzong/p/8967491.html