The difference between using Ajax paging and ordinary Ajax paging in thinkphp is that the processing location is different, thinkphp is handling Ajax-passed values in the controller's method, and then returning the data. Below is a Click event trigger that displays the content with Ajax paging.
The following example is the same category that displays the data of the clicked category under different categories of clicks.
Places that need to be modified are marked with a yellow background.
1.ajax Processing page
$ (". Php_list"). Click (function(){//Click on the event, you can modify according to your own requirements. It can also be placed in $ (document). Ready (function (e) {}) inside automatically loaded. varLeibie = "PHP";//gets the parameters that need to be processed. varFenlei = $ (this). html ();//gets the parameters that need to be processed. $("#fy_n"). Val ("1");//Number of pages, the default is the 1th page. $ (document). Ready (function(e) {Jiazai ();//invokes the Load method. varZys = 0; })//Page Load Data functionJiazai () {varn = $ ("#fy_n"). Val ();//Number of pages displayed in the page display box$.Ajax ({URL: "__controller__/pagechuli3",//First processing pageData:{fenlei:fenlei,n:n,leibie:leibie},//the arguments to be passed, N is required to be written, and other parameters are written according to their own requirements. Type: "POST",DataType: "JSON",Success:function(data) {varstr = ""; for(varI in data)//The for loop is a piece of content to be displayed, and a string to be stitched together. {str=str+ "<div class= ' panel panel-default index_list_wai ' ><div class= ' panel-body ' ><div class= ' index_list _left ' ><div></div><div ' Index_list_user_nick ' > ' +data[i].keyword+ ' </div></div><div class= ' index_list_right ' ><a href= ' # ' ><div class= ' index_list_ziyuan_title ' > ' +data[i].title+ ' </div></a><div class= ' Index_list_ziyuan_jianjie ' > ' +data[i].jianjie+ ' </div> <div class= ' Index_list_ziyuan_di ' ><span class= ' Index_list_ziyuan_wenben ' > ' +data[i].faburen+ ' </span><span class= ' Index_list_ziyuan_wenben ' > Score: "+data[i].avg+" </span><span class= ' Index_list_ziyuan_wenben ' > Hits: "+data[i].djnumber+" </ Span><span class= ' index_list_ziyuan_wenben ' > Upload time: "+data[i". Time+ "</span></div></div></div></div>"; } $("#php_list"). html (str);//Put the stitched string in the specified place } }); //get the number of pages (list)$.Ajax ({URL: "__controller__/pagechuli4",//2nd processing PageData:{fenlei:fenlei,leibie:leibie},//the parameters passed. Here is the number of data to query for Fenlei (classification) and Leibie (category), passing these two values over. Type: "POST",DataType: "TEXT",Success:function(data) {//Total pages//alert (data); varys = Math.Ceil(DATA/5);//The 5 here is the number of bars to display per page, noting that the amount of data displayed on the page is consistent. From here, the following code is to display the number of pages, generally do not need to change, if you need to change the number of pages displayed in the style, can be modified. Zys =Ys; vars = "<li><a id= ' Fy_shang ' >«</a></li>"; varDangqian = $ ("#fy_n"). Val ();//Current Page for(vari=dangqian-2;i<=dangqian+2;i++) { if(I>0 && i<=ys) { if(dangqian==i) {s+ = "<li class= ' active ' ><a class= ' Fy_zhong ' >" +i+ "</a></li>"; } Else{s+ = "<li><a class= ' Fy_zhong ' >" +i+ "</a></li>"} }} s+ = "<li><a id= ' Fy_xia ' >»</a></li>"; $("#fy_list").HTML (s); //add an event to a paged listJiashijian (); }})//How to add an event to a paged list functionJiashijian () {$ ("#fy_shang"). Click (function() {varn = $ ("#fy_n").Val (); if(n>1) {n--; }Else{n=1; } $ ("#fy_n").Val (n); //Loading DataJiazai (); }) $ ("#fy_xia"). Click (function() {varn = $ ("#fy_n").Val (); if(n<Zys) {N++; }Else{n=Zys; } $ ("#fy_n").Val (n); //Loading DataJiazai (); }) $ (". Fy_zhong"). Click (function() {varn = $ (this).text (); $("#fy_n").Val (n); //Loading DataJiazai (); }) }})</script>
2.Thinkphp processing method, Inside is 2 methods.
//what to display after clicking on a category Public functionPagechuli3 ()//The function of this method is to query the data based on the value of Ajax, then return the queried data to Ajax, the default is JSON type. { $u= D ("Zy_list");//the table name is zy_list. $n=$_post[n];//The value of the default number of pages passed over. $class=$_post["Leibie"];//the value of the passed-over category. $fenlei=$_post["Fenlei"];//The value of the classification passed in. if($fenlei= = "All Resources")//If the classification is a full resource { $lie=$u->where ("class="$class' ")->page ($n, ' 5 ')->select ();//The query category is all the data for the target category, calling the page method in thinkphp, showing 5 per page, and 5 in Ajax. $this->ajaxreturn ($lie);//return the queried data to Ajax, and note that the JSON type is returned by default. } Else//The following only adds a condition when querying the data. { $lie=$u->where ("class="$class' and fenlei= '$fenlei' ")->page ($n, ' 5 ')Select (); $this->ajaxreturn ($lie); } } //Number of pages to display after clicking on a category Public functionPagechuli4 () {$u= D ("Zy_list");//created Objects $class=$_post["Leibie"];//Get Data $fenlei=$_post["Fenlei"];//Get Data if($fenlei= = "All Resources") { $SL=$u->where ("class="$class' ")Count();//The query category is the number of all data in the target category $this->ajaxreturn ($SL, "eval");//The number of data is a number, the returned data type can no longer be JSON, in addition to the eval means that the returned data type is changed to text, note that the Ajax page must also receive text. } Else//The number of query data below is only one more condition added { $SL=$u->where ("class="$class' and fenlei= '$fenlei' ")Count(); $this->ajaxreturn ($SL, "eval"); } }
thinkphp Ajax Paging