先把框架的page类改造一下

路径在ThinkPHP/Library/Think/Page.class.php文件

添加一个方法 ajax_show

代码如下

<?php

    /**

     * 组装分页链接

     * @return string

     */

    public function ajax_show() {

        if(0 == $this->totalRows) return '';

        /* 生成URL */

        $this->parameter[$this->p] = '[PAGE]';

        $this->url = U(ACTION_NAME, $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 class="prev" href="javascript:;" data-href="' . $this->url($up_row) . '">' . $this->config['prev'] . '</a>' : '';

        //下一页

        $down_row  = $this->nowPage + 1;

        $down_page = ($down_row <= $this->totalPages) ? '<a class="next" href="javascript:;" data-href="' . $this->url($down_row) . '">' . $this->config['next'] . '</a>' : '';

        //第一页

        $the_first = '';

        if($this->totalPages > $this->rollPage && ($this->nowPage - $now_cool_page) >= 1){

            $the_first = '<a class="first" href="javascript:;" data-href="' . $this->url(1) . '">' . $this->config['first'] . '</a>';

        }

        //最后一页

        $the_end = '';

        if($this->totalPages > $this->rollPage && ($this->nowPage + $now_cool_page) < $this->totalPages){

            $the_end = '<a class="end" href="javascript:;" data-href="' . $this->url($this->totalPages) . '">' . $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 class="num" href="javascript:;" data-href="' . $this->url($page) . '">' . $page . '</a>';

                }else{

                    break;

                }

            }else{

                if($page > 0 && $this->totalPages != 1){

                    $link_page .= '<span class="current">' . $page . '</span>';

                }

            }

        }

        //替换分页内容

        $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 "<div>{$page_str}</div>";

    }

?>

然后在提供后端数据的控制器中这样写代码

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>

<style>

    #page a{margin: 2px}

</style>

<body>

<div class="container">

    <table class="table table-striped table-condensed">

        <thead>

            <tr>

                <td>username</td>

                <td>email</td>

            </tr>

        </thead>

        <tbody id="data_list"></tbody>

    </table>

    <div id="page"></div>

</div>

<script>

    $(function(){

        get_data("http://localhost/thinkphp/");//初始化

        $("body").on('click','#page a',function(){

            get_data($(this).attr("data-href"));

        });

    });

    function get_data(url)

    {

        $.getJSON(url,{},function(res){

            var html="";

            for (var i = 0; i < res.data.length; i++) {

                html+="<tr><td>"+res.data[i].username+"</td><td>"+res.data[i].email+"</td></tr>";

            };

            $("tbody").html(html);

            $("#page").html(res.page);

        });

    }

</script>

</body>

</html>

演示效果如下：

THINKPHP ajax分页示例的更多相关文章

  1. ThinkPHP AJAX分页及JS缓存的应用

    //AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右 主要实现是需要将分页中的每个链接都改为AJAX请求 //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中 ...

  2. thinkphp ajax分页

    临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: 复制代码 <?php namespace Fenye\libs; /** file: page.class.php ...

  3. thinkphp ajax分页加载更多最简单的实现方法

    <div class="li_list"> <volist name="list" id="vo"> <div ...

  4. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  5. 【TP3.2】TP3.2下实现ajax分页（原创+亲测可用）

    一,写在最开始:ajax分页的原理,是利用了js的ajax执行请求,获取分页list和分页page [代码块],去替换页面显示数据的[代码块] 技术:js的ajax + TP3.2的fetch(&qu ...

  6. thinkphp中的ajax分页

    thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...

  7. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  8. python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  9. Thinkphp+Ajax带关键词搜索列表无刷新分页实例

    Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...

随机推荐

  1. LeetCode 新题: Find Minimum in Rotated Sorted Array II 解题报告-二分法模板解法

    Find Minimum in Rotated Sorted Array II Follow up for "Find Minimum in Rotated Sorted Array&quo ...

  2. java 读取execl文件

    java 中读取execl文件是必要功能,下面说下几种读取方式 1.jxl   (支持2003 不支持 2007  貌似最新版支持) /**    * 规则设置的模板导入    * @param fi ...

  3. Python 并行分布式框架 Celery

    Celery 简介 除了redis,还可以使用另外一个神器---Celery.Celery是一个异步任务的调度工具. Celery 是 Distributed Task Queue,分布式任务队列,分 ...

  4. Python socket聊天室程序

    http://blog.csdn.net/calling_wisdom/article/details/42524745 今天用python的socket模块实现了一个聊天室的程序 虽然功能比较简单, ...

  5. acrobat-网格-参考线-网格大小设置

      视图--显示/隐藏--标尺及网格-网格/标尺: 网格:ctrl+U 标尺:ctrl+R     标尺:   网格: 标尺+网格:   网格大小设置: 编辑--首选项-单位和参考线     2013 ...

  6. 【WPF】MVVM前台绑定一组RadioButton按钮

    需求:制作一组RadioButton,像下面这样的效果: [MVVM]要显示一组RadioButton按钮,想法是Controller层联网获取到数据后,将数据进行处理,然后加到一个Observabl ...

  7. 【WPF】TabControl垂直分页栏/选项卡

    分页栏控件TabControl默认的选项卡是水平方向的,如下: 现在要改成垂直方向的: 给TabControl 标签添加属性 TabStripPlacement=”Left” , 如下: <Ta ...

  8. java clone对象

    本文转载至 http://blog.csdn.net/shootyou/article/details/3945221 现在Clone已经不是一个新鲜词语了,伴随着“多莉”的产生这个词语确实很“火”过 ...

  9. 云端中间层负载均衡工具 Eureka

    亚马逊提供了一个负载均衡工具 Elastic Load Balancer,但针对的是终端用户 Web 流量服务器,而 Eureka 针对的是中间层服务器的负载均衡.AWS 固有的环境,对 IP 地址. ...

  10. VS2010在C#头文件中添加文件注释的方法（转）

    步骤: 1.VS2010 中找到(安装盘符以D盘为例)D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTempl ...