thinkphp3.2 ajax分页 无法翻页

cjq003 2018-07-06 04:40:43
thinkphp3.2项目中，我按这个方法 ajax分页 https://www.cnblogs.com/xuzhengzong/p/8967491.html 现在无法翻页，怎么办呢？请不吝赐教！



...全文
1160 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
木秀猿林 2018-07-18
  • 打赏
  • 举报
 回复
你试试在js中定义一个变量把php的值赋值给变量，然后通过js去渲染你的page在试试看能不能调用，
weixin_42645152 2018-07-09
  • 打赏
  • 举报
 回复
太专业了，没看明白
cjq003 2018-07-08
  • 打赏
  • 举报
 回复
我把js代码拷贝到 action.html 的 <div class="page">{$_page}</div>上方还是不行：





<div id="list" class="list">

    <!-- 用户行为ajax分页示例demo页面 -->

    <div class="data-table" id="data-table">

        <ul class="news-item" id="newsData">

            <volist name="_list" id="vo">

                <li>

                    <a href="{:U('news/newsDynamic2?news_id=' .$vo[news_id])}"><img src="__PUBLIC__/Uploads/{$vo[news_logo]}" /><h3>{$vo.news_title}</a></h3><p>{$vo.news_article_title}</p><span>{$vo.news_uptime}</span>

                </li>

            </volist>      

        </ul>

    </div>



    <!-- 分页 -->

        <script type="text/javascript">

            function index(id){

                alert('ok5');

                var id = id;

                //把数据传递到要替换的控制器方法中

                $.ajax({

                    url:"{:U('ajax_action')}",

                    type:"POST",

                    async:false,

                    dataType:"JSON",

                    data:{'p':id,'news_type_id':'*'},

                    //data:{'p':id},

                    success:function(data){

                        alert('ok6');

                        console.log('data.content:' + data.content);

                        $("#list").html(data.content);  //html块替换html的div

                    },

                    error:function(data){

                        console.log("4:ajax not run~");

                    }

                });

            }

        </script>



        <div class="page">{$_page}</div>

    <!-- /分页 -->

    

</div>


跟踪到的动态生成的 $_page的值是：
' 15 条记录 1/2 页 <a class=\'ajaxify\' id=\'big\' href=\'javascript:index(2);\'>下一页</a> <span class=\'current\'>1</span><a class=\'ajaxify\' id=\'big\' href=\'javascript:index(2);\'> 2</a> '
我点击 第2页 的链接，alert('ok5'); 没弹出来！怎么办呢？
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
引用 14 楼 smilemany 的回复:
检查js吧，这个不是最稀松平常的问题吗


谢谢回复！js 放在 news_header.html 没正确执行，我现在把它放到 news_footer.html了，新闻列表出来了，但是还是无法翻页。点击 第2页时 以下几个alert都没弹出来：

news_footer.html代码：




<script type="text/javascript">

    alert('ok');

    /* 初始化加载action_ajax分页数据 --xuzhengzong 2018/04/28 */

    var init_id = 1;

    index(init_id);     //初始化页面 init_id==1

    function index(id){

        alert('ok1');

        var id = id;

        //把数据传递到要替换的控制器方法中

        $.ajax({

            url:"{:U('ajax_action')}",

            type:"POST",

            async:false,

            dataType:"JSON",

            data:{'p':id,'news_type_id':'*'},

            //data:{'p':id},

            success:function(data){

                alert('ok2');

                console.log('data.content:' + data.content);

                $("#list").replaceWith(data.content);  //html块替换html的div

            },

            error:function(data){

                console.log("4:ajax not run~");

            }

        });

    }

</script>



<div class="footer-box">

</div>

cjq003 2018-07-07
  • 打赏
  • 举报
 回复
action.html代码：



<div id="list" class="list">

    <!-- 用户行为ajax分页示例demo页面 -->

    <div class="data-table" id="data-table">

        <ul class="news-item" id="newsData">

            <volist name="_list" id="vo">

                <li>

                    <a href="{:U('news/newsDynamic2?news_id=' .$vo[news_id])}"><img src="__PUBLIC__/Uploads/{$vo[news_logo]}" /><h3>{$vo.news_title}</a></h3><p>{$vo.news_article_title}</p><span>{$vo.news_uptime}</span>

                </li>

            </volist>      

        </ul>

    </div>



    <!-- 分页 -->

        <div class="page">{$_page}</div>

    <!-- /分页 -->

    

</div>
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
引用 8 楼 xuzuning 的回复:
jquery 的事件绑定代码呢？


谢谢版主回复！
xuzuning 2018-07-07
  • 打赏
  • 举报
 回复
jquery 的事件绑定代码呢？
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
newsDynamic.html代码：



<include file="Common/news_header"/>

    <title>新闻动态</title>

    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/newsDynamic.css">



<!--注册模态框  start-->

<div id="register"></div>

<!--注册模态框  end-->

<div id="login"></div>

<!--内容主体 start-->

<div id="main">

    <!-- 新闻动态   1 -->

    <div class="news">

        <div class="news-box1">

            <?php showImage($newbanner['new_banner']); ?>

            <div class="box1-title">

                <h1>新闻动态</h1>

                <span>NEWS</span>

                <!--<a href="">立刻咨询</a>-->

            </div>

        </div>



        <div class="news-box2">

            <p><input type="text" id="search" placeholder="请输入你想要的内容"><a id="as"><img src="__PUBLIC__/Home/news/search.png"></a></p>

            <div class="news-list">

                <div class="box2-left">

                             

                    <ul class="news-classify" id="news">                        

                        <li ><a class="classify-active" id="a1">全部新闻</a></li>

                    <!--新闻翻页-->

                    <div class="pageWrap" id="newsPage">                        

                        <!-- 数据列表+ajax分页 -->

                        <div id="list" class="list">

                            

                        </div>

                    </div>                    

                 </div>

            </div>

        </div>

    </div>

<!--内容主体 end-->



NewsController.class.php代码：



<?php

namespace Home\Controller;

use Think\Controller;

use Think\Model;

use Think\Ajaxpage;



class NewsController extends Controller{

    

    public function __construct(){

        parent::__construct();

    }

    

    /**

     * 用户行为列表,自定义的ajax分页,使用方式不应该是页面访问，

     * 而应该是js的onload完成进行ajax初始化访问 

     * @author xuzhengzong 2018/04/28

     */

    public function ajax_action($model='Action'){

        //获取列表数据

        //统计要查询数据的数量

        $page_size = 10;       //评论固定10条

        $page = intval($_REQUEST['p']);

        $news_type_id = intval($_REQUEST['news_type_id']);

        if(empty($page))$page = 1;

        $limit = (($page-1)*$page_size).",".$page_size;

        

        $model=D('Admin/news');

           

        $where = '';  



\Think\Log::write(' 3_POST: ');   // cjq add

\Think\Log::write(var_export($_POST,true));   // cjq add



        if($_POST['news_type_id']){

            //$news_type_id=$_POST['news_type_id'];

            //如果传过来的新闻类型是全部新闻

            if($news_type_id=='*'){    

                $list=$model->select();

            }else{  //如果传过来的新闻类型ID不是全部新闻

                //根据新闻类型ID找到所有该新闻类型下的所有新闻  

                $where['news_type_id'] = array('eq',$news_type_id);   

                $list=$model->where($where)->select();               

            }

        }

        

\Think\Log::write(' 3list: ');   // cjq add

\Think\Log::write(var_export($list,true));   // cjq add

        

        $count[0]['count'] = $model->where($where)->count("*");    

    

        $param = '';

        $Page = new \Think\Ajaxpage($count[0]['count'],$page_size,'index',$param);// 实例化分页类 传入总记录数和每页显示的记录数(25)

        $show = $Page->show();// 分页显示输出

        

\Think\Log::write(' _page: ');   // cjq add

\Think\Log::write(var_export($show,true));   // cjq add

        

\Think\Log::write(' _list: ');   // cjq add

\Think\Log::write(var_export($list,true));   // cjq add



        $this->assign('_page',$show);

        $this->assign('_list', $list);

        $html['content'] = $this->fetch('Ajax/action');

        $this->ajaxReturn($html);

    }                          

}
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
news_header.html代码：



<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="__PUBLIC__/Home/js/jquery.min.js"></script>



    <script type="text/javascript">

        /* 初始化加载action_ajax分页数据 --xuzhengzong 2018/04/28 */

        var init_id = 1;

        index(init_id);     //初始化页面 init_id==1

        function index(id){

            var id = id;

            //把数据传递到要替换的控制器方法中

            $.ajax({

                url:"{:U('ajax_action')}",

                type:"POST",

                async:false,

                dataType:"JSON",

                data:{'p':id,'news_type_id':'*'},

                //data:{'p':id},

                success:function(data){

                    $("#list").replaceWith(data.content);  //html块替换html的div

                },

                error:function(data){

                    console.log("4:ajax not run~");

                }

            });

        }

    </script>

</head>
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
谢谢回复，以下是代码：

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;

    }

 

}

 

?>
斯麦尔曼尼 2018-07-07
  • 打赏
  • 举报
 回复
检查js吧，这个不是最稀松平常的问题吗
xuzuning 2018-07-07
  • 打赏
  • 举报
 回复
连代码都不肯贴，没人会帮你的
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
引用 12 楼 xuzuning 的回复:
要看到 js 代码


那我就再发一次吧！news_header.html代码：



<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="__PUBLIC__/Home/js/jquery.min.js"></script>

 

    <script type="text/javascript">

        /* 初始化加载action_ajax分页数据 --xuzhengzong 2018/04/28 */

        var init_id = 1;

        index(init_id);     //初始化页面 init_id==1

        function index(id){

            var id = id;

            //把数据传递到要替换的控制器方法中

            $.ajax({

                url:"{:U('ajax_action')}",

                type:"POST",

                async:false,

                dataType:"JSON",

                data:{'p':id,'news_type_id':'*'},

                //data:{'p':id},

                success:function(data){

                    $("#list").replaceWith(data.content);  //html块替换html的div

                },

                error:function(data){

                    console.log("4:ajax not run~");

                }

            });

        }

    </script>

</head>


这个文件是在 newsDynamic.html中被引用的：<include file="Common/news_header"/>
谢谢！请多指点！
xuzuning 2018-07-07
  • 打赏
  • 举报
 回复
要看到 js 代码
cjq003 2018-07-07
  • 打赏
  • 举报
 回复
引用 8 楼 xuzuning 的回复:
jquery 的事件绑定代码呢？


谢谢回复！请见 #6楼 news_header.html代码中的 js 代码，是 #3楼 说要放在 <head>标签中的。我原来放在动态生成的 newsDynamic.html 里的 35行的
<!-- 数据列表+ajax分页 -->
<div id="list" class="list">

</div>
下方，但是也无法生效，因为以上 <div id="list" class="list"> 里的 <a href="javascript:index(2)">2</a> 是动态生成的，点击这个第2页 链接 并无法调用到 js 方法 index(2)，怎么办呢？
木秀猿林 2018-07-06
  • 打赏
  • 举报
 回复
那你把JS函数写在<head></head>里面，这样看看
cjq003 2018-07-06
  • 打赏
  • 举报
 回复
引用 1 楼 w6248117 的回复:
你先查看下你的js函数是否执行了，然后看你调用后端返回的信息。是不是报错了


谢谢回复！主要是分页代码是动态生成的:<a href="javascript:index(2)">2</a> 似乎调用不到后面的 js函数 index() ! 怎么办呢？
木秀猿林 2018-07-06
  • 打赏
  • 举报
 回复
你先查看下你的js函数是否执行了，然后看你调用后端返回的信息。是不是报错了
ThinkPHP使用ajax分页
Thinkphp的分页都是A便签用于跳转但是不能用于ajax分页因此这么写就OK了哈~ $(function(){$('.task_pagea').click(function(){$.get($(this).attr('href'),function(data){$('#index_content').html(da...
php中登陆后返回前两页,ThinkPHP3.2分页显示超详细超简单
ThinkPHP3.2分页显示超详细超简单ThinkPHP3.2分页显示,超详细,超简单第一步:导入类下载AjaxPage.class.php我这里的提供的是之前3.1时候用的,在3.2用的时候需要在类里面加个命名空间Paste_Image.png这个类放在ThinkPHP- Library-Org-Util路径下Paste_Image.png第二步:php里该写的代码ProductContro...
【TP3.2】TP3.2下实现ajax分页（原创+亲测可用）
一，写在最开始：ajax分页的原理，是利用了js的ajax执行请求，获取分页list和分页page 【代码块】，去替换页面显示数据的【代码块】 技术：js的ajax + TP3.2的fetch("Index/data")技术，仅此而已。 1、在Library\Think\ 目录下直接加入以下代码：Ajaxpage.class.php <?php /** * ajax...
TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）
1.前言 　　　　作为一名php程序员，我们开发网站主要就是为了客户从客户端进行体验，在这里，thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面，这种翻页的用户体验显然是不太理想的，我们希望每次翻页只刷新我们想要的数据集部分的数据，这样可以给客户带来很好的体验效果。那么在TP下如何进行ajax无刷新分页呢？ 　　1.1建立ajax分页 　　　　在TP框架的ThinkPHP\Lib...
ThinkPHP3.2.3选择多个CheckBox删除多条数据的实现（使用AJAX提交数据）
这个自己写了一部分，也借鉴了下别人的，功能有很多不足（有时间我会继续改进），如果有心人路过看到还望能留言解决下，谢了（在底部我会列出来）。 HTML页面： 关键的两个标签 a class="btn btn-xs btm-input btn-purple" onclick="deleteCheckBox()" id="sc" style="width: 60px" href="ja
PHP

20,359

社区成员

19,658

社区内容

发帖
与我相关
我的任务
社区描述
“超文本预处理器”，是在服务器端执行的脚本语言，尤其适用于Web开发并可嵌入HTML中。PHP语法利用了C、Java和Perl，该语言的主要目标是允许web开发人员快速编写动态网页。
phpphpstorm 技术论坛（原bbs）
社区管理员
  • 开源资源社区
  • phpstory
  • xuzuning
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章