Example of thinkPHP5 framework implementing paging function based on ajax

In this paper, an example is given to illustrate the implementation of paging function based on ajax by thinkPHP5 framework. Share it for your reference, as follows:

The tab of the last 1 page is involved in ajax paging, so I studied the use of ajax paging in tp5 under 1

First, look at the introduction of paging function of tp5 under 1

参数	描述
list_rows	每页数量
page	当前页
path	url路径
query	url额外参数
fragment	url锚点
var_page	分页变量
type	分页类名

$caseDetails = CaseDetails::where(['status'=>1])->paginate(9,false,['path'=>'javascript:AjaxPage([PAGE]);']);

So we write the paged query as shown in the above code.

So that the page shows that each page becomes above AjaxPage('当前分页数，自动变化')

Then we can write a corresponding function AjaxPage (page) in the page to complete the corresponding ajax request query and return to the specified view

The ajax request controller method is as follows

public function all()
{
    $caseDetails = CaseDetails::where(['status'=>1])->paginate(9,false,['path'=>'javascript:AjaxPage([PAGE]);']);
    return view('getall',['res'=>$caseDetails]);
}

If the tab with ID queries the corresponding current category again, you can use the following

public function getAjax($id,$page=1)
{
    $res = CaseDetails::where(['category'=>$id])->paginate(9,false,['page'=>$page,'path'=>"javascript:AjaxDetailsPage({$id},[PAGE]);"]);
    return view('',['res'=>$res]);
}

The js code is as follows:

function AjaxPage(page){
  $.get('/index/successcase/getAll',{ page:page },function (data) {
    $('.little-content').html(data);
  })
}
$('.on').hover(function(){
  $.get('/index/successcase/all',function (data) {
    $('.little-content').html(data);
  })
});
$('.title-id').hover(function(){
  var id = $(this).attr('title');
  $.get('/index/successcase/getajax',{ 'id':id },function(data){
    $('.little-content').html(data);
  });
});
function AjaxDetailsPage(id,page){
  $.get('/index/successcase/getAjax',{ id:id,page:page },function (data) {
    $('.little-content').html(data);
  })
}

ajax Scope View

{volist name="res" id="casedetails"}
<li class="little-block">
  <img src="{$casedetails.pic}"/>
  <div class="mb-text">
    <div class="text">
      <h1>{$casedetails.name}</h1>
      <p class="p3">{$casedetails.caseCategory.name}</p>
      <a href="#" rel="external nofollow" >VIEW MORE</a>
    </div>
  </div>
</li>
{/volist}
<br>
{$res->render()}

For more readers interested in thinkPHP related contents, please check the topics of this site: "ThinkPHP Introduction Tutorial", "thinkPHP Template Operation Skills Summary", "ThinkPHP Common Methods Summary", "codeigniter Introduction Tutorial", "CI (CodeIgniter) Framework Advanced Tutorial", "Zend FrameWork Framework Introduction Tutorial" and "PHP Template Technology Summary".

Hope that this article is based on ThinkPHP framework of PHP programming help.