具体为什么用异步来做分页我就不多说了！
用异步来做分页，主要还是看分页类怎么玩！
方便管理，还是把Ajax分页作为一个工具来使用：
同样新建工具类：
多次尝试，最终修改好的分页类是这样的：（我自己使用还是比较爽的）
<?php
namespace Components;
class AjaxPage {
public $firstRow; // 起始行数
public $listRows; // 列表每页显示行数
public $parameter; // 分页跳转时要带的参数
public $totalRows; // 总行数
public $totalPages; // 分页总页面数
public $rollPage = 11;// 分页栏每页显示的页数
public $lastSuffix = true; // 最后一页是否显示总页数
private $p = 'p'; //分页参数名
private $url = ''; //当前链接URL
private $nowPage = 1;
// 分页显示定制
private $config = array(
'header' => '<span class="rows">共 %TOTAL_ROW% 条记录</span>',
'prev' => '<<',
'next' => '>>',
'first' => '1...',
'last' => '...%TOTAL_PAGE%',
'theme' => '%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%',
);
/**
* 架构函数
* @param array $totalRows 总的记录数
* @param array $listRows 每页显示记录数
* @param array $parameter 分页跳转的参数
*/
public function __construct($totalRows, $listRows=20,$ajax_func, $parameter = array()) {
C('VAR_PAGE') && $this->p = C('VAR_PAGE'); //设置分页参数名称
/* 基础设置 */
$this->totalRows = $totalRows; //设置总记录数
$this->ajax_func = $ajax_func;
$this->listRows = $listRows; //设置每页显示行数
$this->parameter = empty($parameter) ? $_GET : $parameter;
$this->nowPage = empty($_GET[$this->p]) ? 1 : intval($_GET[$this->p]);
$this->nowPage = $this->nowPage>0 ? $this->nowPage : 1;
$this->firstRow = $this->listRows * ($this->nowPage - 1);
}
/**
* 定制分页链接设置
* @param string $name 设置名称
* @param string $value 设置值
*/
public function setConfig($name,$value) {
if(isset($this->config[$name])) {
$this->config[$name] = $value;
}
}
/**
* 生成链接URL
* @param integer $page 页码
* @return string
*/
private function url($page){
return str_replace(urlencode('[PAGE]'), $page, $this->url);
}
/**
* 组装分页链接
* @return string
*/
public function show() {
if(0 == $this->totalRows) return '';
/* 生成URL */
$this->parameter[$this->p] = '[PAGE]';
$a = u(__SELF__);
$b = substr($a,15,strlen($a));
$this->url = U($b, $this->parameter);
/* 计算分页信息 */
$this->totalPages = ceil($this->totalRows / $this->listRows); //总页数
if(!empty($this->totalPages) && $this->nowPage > $this->totalPages) {
$this->nowPage = $this->totalPages;
}
/* 计算分页临时变量 */
$now_cool_page = $this->rollPage/2;
$now_cool_page_ceil = ceil($now_cool_page);
$this->lastSuffix && $this->config['last'] = $this->totalPages;
//上一页
$up_row = $this->nowPage - 1;
//$up_page = $up_row > 0 ? '<a href="javascript:' . $this->ajax_func.'('.$up_row.')" class="prev">' . $this->config['prev'] . '</a>' : '<a href="javascript:;" class="prev">' . $this->config['prev'] . '</a>';
$up_page = $up_row > 0 ? '<a href="javascript:;" class="prev">' . $this->config['prev'] . '</a>' : '<a href="javascript:;" class="prev">' . $this->config['prev'] . '</a>';
//下一页
$down_row = $this->nowPage + 1;
//$down_page = ($down_row <= $this->totalPages) ? '<a href="javascript:' . $this->ajax_func.'('.$down_row.')" class="next">' . $this->config['next'] . '</a>' : '<a class="next">' . $this->config['next'] . '</a>';
$down_page = ($down_row <= $this->totalPages) ? '<a href="javascript:;" class="next">' . $this->config['next'] . '</a>' : '<a href="javascript:;" class="next">' . $this->config['next'] . '</a>';
//第一页
$the_first = '';
if($this->totalPages > $this->rollPage && ($this->nowPage - $now_cool_page) >= 1){
$the_first = '<a href="javascript:' . $this->ajax_func . '(1);" class="com">' . $this->config['first'] . '</a>';
}
//最后一页
$the_end = '';
if($this->totalPages > $this->rollPage && ($this->nowPage + $now_cool_page) < $this->totalPages){
$the_end = '<a href="javascript:' . $this->ajax_func . '('.$this->totalPages.');" class="com">' . $this->config['last'] . '</a>';
}
//数字连接
$link_page = "";
for($i = 1; $i <= $this->rollPage; $i++){
if(($this->nowPage - $now_cool_page) <= 0 ){
$page = $i;
}elseif(($this->nowPage + $now_cool_page - 1) >= $this->totalPages){
$page = $this->totalPages - $this->rollPage + $i;
}else{
$page = $this->nowPage - $now_cool_page_ceil + $i;
}
if($page > 0 && $page != $this->nowPage){
if($page <= $this->totalPages){
$link_page .= '<a href="javascript:' . $this->ajax_func . '(' . $page . ');" class="com">' . $page . '</a>';
}else{
break;
}
}else{
if($page > 0){
$link_page .= '<a href="javascript:' . $this->ajax_func . '(' . $page . ');" class="active com">' . $page . '</a>';
}
}
}
//替换分页内容
$page_str = str_replace(
array('%HEADER%', '%NOW_PAGE%', '%UP_PAGE%', '%DOWN_PAGE%', '%FIRST%', '%LINK_PAGE%', '%END%', '%TOTAL_ROW%', '%TOTAL_PAGE%'),
array($this->config['header'], $this->nowPage, $up_page, $down_page, $the_first, $link_page, $the_end, $this->totalRows, $this->totalPages),
$this->config['theme']);
return "{$page_str}";
}
}接下来写控制器：
<?php
namespace Home\Controller;
use Think\Controller;
class LingdaoController extends Controller {
public function index(){
//分页处理
$count = M('document')->count();
//$page = new \Think\Page($count,2);
$page = new \Components\AjaxPage($count,5,'show');
$show = $page->show();
$list = M('document')->limit($page->firstRow.','.$page->listRows)->select();
$this->assign('list',$list);
$this->assign('page',$show);
$this->display();
}
public function ajaxpage(){
//分页处理
$count = M('document')->count();
//$page = new \Think\Page($count,2);
$page = new \Components\AjaxPage($count,5,'show');
$show = $page->show();
$list = M('document')->limit($page->firstRow.','.$page->listRows)->select();
foreach($list as $k => $v){
echo '<li>'.$k.'=='.$v['title'].'</li>';
}
}
}经过多次尝试，最终视图调整为这样：
<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<style type='text/css'>
*{margin:0px; padding:0px; list-style-type:none; text-decoration:none; font-family:"微软雅黑";}
ul{width: 500px; height: 120px; margin: 60px auto;}
/* 分页样式 */
div.listNext{text-align: center; font-size:0;}
div.listNext a{font-size:14px; width: 35px; height:35px; display:inline-block; border:1px solid red; border-right:none; text-align: center; line-height: 35px;}
div.listNext a.next{border-right:1px solid red;}
div.listNext a.text{cursor:text;}
div.listNext a.active{background:#ddd;}
</style>
</head>
<body>
<ul class='list'>
<foreach name='list' item='v' key='i'>
<li>{$i}=={$v.title}</li>
</foreach>
</ul>
<div class='listNext'>{$page}</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
function show(id){
var url = "{:U('Lingdao/ajaxpage')}";
$.get(url,{'p':id}, function(data){
$('ul.list').html(data);
});
}
(function(){
var oIndex = 0;
var oAcomSize = $('div.listNext>a.com').size();
$('div.listNext>a.prev').addClass('text');
$('div.listNext>a.com').click(function(){
oIndex = $(this).index();
if(oIndex != 1){$('div.listNext>a.prev').removeClass('text');}else{$('div.listNext>a.prev').addClass('text');};
if(oIndex != oAcomSize){$('div.listNext>a.next').removeClass('text');}else{$('div.listNext>a.next').addClass('text');};
$(this).addClass('active').siblings('a.com').removeClass('active');
});
// prev click
$('div.listNext>a.prev').click(function(){
$('div.listNext>a.com').each(function(i,e){if($(this).hasClass('active')){oIndex = i+1;};});
oIndex = oIndex - 1;
$('div.listNext>a.next').removeClass('text');
if(oIndex == 1){$(this).addClass('text');};
if(oIndex == 0){oIndex = 0; return false;};
$('div.listNext>a').eq(oIndex).addClass('active').siblings('a.com').removeClass('active');
$(this).attr('href','javascript:show('+oIndex+');');
});
// next click
$('div.listNext>a.next').click(function(){
$('div.listNext>a.com').each(function(i,e){if($(this).hasClass('active')){oIndex = i+1;};});
oIndex = oIndex + 1;
if(oIndex == oAcomSize){$(this).addClass('text');};
if(oIndex == oAcomSize+1){oIndex = oAcomSize; return false;};
$('div.listNext>a').eq(oIndex).addClass('active').siblings('a.com').removeClass('active');
$(this).attr('href','javascript:show('+oIndex+');');
});
})();
</script>
</body>
</html>
发表评论 取消回复