Using THINKPHP5 framework to realize the analysis of paging function based on Ajax

This article mainly introduces the THINKPHP5 framework implementation of the AJAX-based paging function, combined with an example of the THINKPHP5 framework on the implementation of Ajax paging operation of the specific steps, code and related operation methods, the need for friends can refer to the next

The example in this paper describes the THINKPHP5 framework for AJAX-based paging functionality. Share to everyone for your reference, as follows:

The last page of the tab is also involved in the Ajax paging, so the study of TP5 Ajax paging use method

First look at TP5 's paging feature introduction

Parameters	Description
List_rows	Quantity per page
Page	Current page
Path	URL path
Query	URL Extra Parameters
Fragment	URL Anchor Point
Var_page	Paging variables
Type	Pagination 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.

So the page shows each page as aAjaxPage('当前分页数，自动变化')

Then we can write a corresponding function ajaxpage (page)in the page to complete the corresponding Ajax request query, in 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 option cassette ID is queried again for the current classification, 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" >    <p class= "Mb-text" >    <p class= "text" >      


The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!