0

0

详解thinkphp下部分内容的ajax无刷新分页

藏色散人

藏色散人

发布时间:2022-01-31 05:00:30

|

2356人浏览过

|

来源于segmentfault

转载

下面thinkphp框架教程栏目将给大家介绍thinkphp下页面内部分内容的ajax无刷新分页,希望对需要的朋友有所帮助!

thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻页只刷新我们想要的数据集部分的数据,这样我们很容易想到ajax异步通信,用ajax与数据库(本人在开发过程中使用的是mysql数据库)异步交互,将从数据库查询的数据返回,用jquery替换原有的数据,从而在不刷新这个页面的情况下进行局部刷新,从而达到我们预期的效果。
thinkphp ajax 分页类
这个分页类是网上找到的资源,大家可以直接在自己的thinkphp里创建这么一个类,我这里类名是 AjaxPage.class.php,如有需要,可修改命名空间

'条记录','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 = C('VAR_PAGE') ? C('VAR_PAGE') : '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 = C('VAR_PAGE') ? C('VAR_PAGE') : '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="".$this->config['prev']."";
    }else{
        $upPage="";
    }

    if ($downRow <= $this->totalPages){
        $downPage="".$this->config['next']."";
    }else{
        $downPage="";
    }
    // << < > >>
    if($nowCoolPage == 1){
        $theFirst = "";
        $prePage = "";
    }else{
        $preRow =  $this->nowPage-$this->rollPage;
        $prePage = "上".$this->rollPage."页";
        $theFirst = "".$this->config['first']."";
    }
    if($nowCoolPage == $this->coolPages){
        $nextPage = "";
        $theEnd="";
    }else{
        $nextRow = $this->nowPage+$this->rollPage;
        $theEndRow = $this->totalPages;
        $nextPage = "下".$this->rollPage."页";
        $theEnd = "".$this->config['last']."";
    }
    // 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 .= "  ".$page." ";
            }else{
                break;
            }
        }else{
            if($this->totalPages != 1){
                $linkPage .= " ".$page."";
            }
        }
    }
    $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;
}

}

具体步骤
1.控制器
现在index方法里display,再在page方法里fetch,ajaxReturn,这里要注意fetch的是引用页(article)

count();
        //实例化分页类,传入三个参数,分别是数据总数、每页显示的数据条数、要调用的jQuery ajax方法名
        $p=new \Think\AjaxPage($count,4,'server');
        //产生分页信息
        $page=$p->show();
        //要查询的数据,limit表示每页查询的数量,这里为4条
        $data = $info->limit($p->firstRow.','.$p->listRows)->select();
        //assign方法往模板赋值
        $this->assign('list',$data);
        $this->assign('page',$page);
//        $res["content"] = $this->fetch('Index/index');
//        $this->ajaxReturn($res);
        $this->display();
    }
    public function page(){
        //实例化数据模型
        $info=M('info');
        //统计要查询数据的数量
        $count=$info->count();
        //实例化分页类,传入三个参数,分别是数据总数、每页显示的数据条数、要调用的jQuery ajax方法名
        $p=new \Think\AjaxPage($count,4,'server');
        //产生分页信息
        $page=$p->show();
        //要查询的数据,limit表示每页查询的数量,这里为4条
        $data = $info->limit($p->firstRow.','.$p->listRows)->select();
        //assign方法往模板赋值
        $this->assign('list',$data);
        $this->assign('page',$page);
        //ajax返回信息
        $res["content"] = $this->fetch('Index/article');
        $this->ajaxReturn($res);
    }
}

2.模板
柱模板 index.html

其中,引用的模板为需要分页的这部分内容

立即学习PHP免费学习笔记(深入)”;





hello world

需要分页的模板

article.html

野羊分类信息系统
野羊分类信息系统

===更新说明==解决了无法登陆后台的问题!完善了部分功能修复了一个BUG..修改静态模版说明:本系统的首页 和 内容页 不支持动态显示,需要生成HTML(实为.asp文件)模版文件存放在temp目录下index.html为首页模版show.html为内容页模版......=============2007 - 10 - 20 ===========注:1*使用前请务必修改 inc/conn.as

下载
   
信息列表
//循环赋值
a b c d
{$info.a} {$info.b} {$info.c} {$info.d}
//分页信息
{$page}

这样就可以保证,点击页码的时候,不会导致分页内容上边的内容会再次加载一遍,造成网页乱

3.js部分
这一步是实现ajax无刷新分页的重点,用到了jQuery的ajax通信,通过与数据库的ajax交互,将获取到的数据写到模板中,替换掉之前的数据集,达到分页的目的。server.js  ,可写在内部也可写在外部,自由选择

 

这个方法名 server 就是控制器中实例化分页类中传的第三个参数,每次在模板上点击翻页,都会触发这个js方法server(p),里面传递的是第几页的页码。

$p=new \Think\AjaxPage($count,4,'server');

这里用到的是jQuery里ajax方法的.get形式进行ajax与后台通信,拿到返回的数据用replaceWith方法,用

+数据

替换模板中id为server的p,实现分页效果。

推荐学习:《thinkphp视频教程

相关文章

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

11

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号