先把框架的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. rpc简介、原理、实例

    简介 RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台机器上运行的主程序,可以调用另一台机器上准备好的子程序,就像LPC(本地过 ...

  2. hive12启动报错org.apache.thrift.server.TThreadPoolServer.<init>(Lorg/apache/thrift/server/TThreadPoolServer$Args;)

    执行如下命令启动hive服务:./bin/hive --service hiveserver,报如下错误: Starting Hive Thrift ServerException in thread ...

  3. JVM 内存分配机制总结

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区),Heap(堆),Program Counter Register(程序计数器), VM Stack(虚拟机栈,也 ...

  4. MD5算法实现

    MD5算法的简要叙述为: MD5以512位分组来处理输入的信息(512位分组?每次处理都取出512位数据?), 每一分组又被划分为16个32位子分组(16乘32刚好是512), 经过一些列的处理后(怎 ...

  5. C语言 · 龟兔赛跑预测

    基础练习 龟兔赛跑预测   时间限制:1.0s   内存限制:512.0MB        锦囊1 模拟.   问题描述 话说这个世界上有各种各样的兔子和乌龟,但是研究发现,所有的兔子和乌龟都有一个共 ...

  6. C语言 · 最大最小值

    算法提高 题目1 最大最小值   时间限制:1.0s   内存限制:1.0GB      问题描述 给定 N 个整数,请你找出这 N 个数中最大的那个和最小的那个. 输入格式 第一行包含一个正整数 N ...

  7. Web API（三）：创建Web API项目

    在本篇文章中将讲解如何使用Visual Studio创建一个新的ASP.NET Web API项目. 在Visual Studio中有两种方式用于创建Web API项目: 1.创建带MVC的Web A ...

  8. [ Laravel 5.1 文档 ] 服务 —— 任务调度

    1.简介 在以前,开发者需要为每一个需要调度的任务编写一个Cron条目,这是很让人头疼的事.你的任务调度不在源码控制中,你必须使用SSH登录到服务器然后添加这些Cron条目.Laravel命令调度器允 ...

  9. JQuery _ 定时器(jQuery Timers) 学习

    jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识 提供了三个函式 1. everyTime(时 ...

  10. Droptiles - 炫酷的 Metro 风格的层叠式 Web 面板

    介绍 Droptiles是一套Metro风格的类似Win8的Web2.0控制面板.它采用图块(tiles)建立用户体验.图块(tiles)是一些可以从外部资源中获取数据的迷你应用.点击图块(tile) ...