2017-09-16TP5实现Ajax分页

您现在的位置是: 首页 > 学无止境 > 笔记

我们知道Thinkphp5自带的分页类是整页刷新,如何实现只局部刷新局部数据呢?本篇文章主要是通过修改bootstrap.php文件,实现Thinkphp5无刷新分页。

一、修改Bootstrap代码:

1、为了不改动Bootstrap.php源代码,拷贝thinkphp目录下的Bootstrap.php重新命名为BootstrapAjax.php

20170616093437_78470.png

2、修改BootstrapAjax.php文件

(1) class BootstrapAjax extends Paginator  改为 class BootstrapAjax extends Paginator

123.png

(2) 找到getAvailablePageWrapper()函数将:

 return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';

改成:

return '<li id="page'.$page.'"><a href="javascript:void(0);"  data-page="'
 . htmlentities($url) . '"  pagenum='.$page.'  >' . $page . '</a></li>';

二、在使用分页页面新增Type参数'type'     => 'BootstrapAjax':

$count=Db::name('xxx')->where("xxx","xxx")->count();
    $list=Db::name('xxx')->where("xxx","xxx")->paginate(5,$count,
    ['type'=>'BootstrapAjax',
    'var_page' => 'page',
    'path'=>url('xxx/xxx',['xxx'=>$xxx])
    ]
);

三、jquery实现局部刷新数据

//jquery 绑定click事件
$("#pagelist").on("click",".pagination a",function(){
    //另外一种写法$(".pagination a").click(function()){ 两种都可以绑定click事件
    var url=$(this).attr("data-page");
    getPage(url);
});
function getPage(url){
    $.get(url, function(result){
    $("#pagelist").html(result);
});
}

关键字词:TP5Ajax | Ajax分页