Using thinkPHP5 framework to implement ajax-based paging function analysis

This article mainly introduces the thinkPHP5 framework to implement ajax-based paging function. It analyzes the specific steps, implementation code and related operation methods of ajax paging operation on the thinkPHP5 framework in the form of examples. Friends in need can refer to the following

The example of this article describes how the thinkPHP5 framework implements ajax-based paging function. Share it with everyone for your reference, the details are as follows:

The tab on the most recent page involves ajax paging, so I studied how to use ajax paging in tp5

First, let’s take a look at the paging in tp5 Function introduction

Parameter	Description
list_rows	Quantity per page
page	Current page
path	url path
query	url extra parameters
fragment	url anchor
var_page	Paging variable
type	Paging class name

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

So our paging query is written as shown in the above code.

In this way, the page displays that each page becomes AjaxPage('Current number of pages, automatically changes')

Then we can write a corresponding page in the page FunctionAjaxPage(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 has an ID to query the 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}"/>
  <p class="mb-text">
    <p class="text">
      <h1>{$casedetails.name}</h1>
      <p class="p3">{$casedetails.caseCategory.name}</p>
      <a href="#" rel="external nofollow" >VIEW MORE</a>
    </p>
  </p>
</li>
{/volist}
<br>
{$res->render()}

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

PHP back-end method to implement paging subscript generation code for web pages

About thinkPHP framework docking with Alipay Analysis of the callback problem of the instant payment interface

##Analysis on adding js event paging class customPage.class.php to the thinkPHP framework

The above is the detailed content of Using thinkPHP5 framework to implement ajax-based paging function analysis. For more information, please follow other related articles on the PHP Chinese website!