本文實例講述了tp5框架無刷新分頁實現(xiàn)方法。分享給大家供大家參考，具體如下：
已tp5 分頁為例，
1.默認(rèn)生成的分頁 頁碼如下：
|
1
2
3
4
5
6
|
<ul class="pagination"><li><a href="?page=1" rel="external nofollow" rel="external nofollow" >«</a></li><li><a href="?page=1" rel="external nofollow" rel="external nofollow" >1</a></li><li class="active"><span>2</span></li><li class="disabled"><span>»</span></li></ul> |
2.點擊頁碼 值，跳轉(zhuǎn)到對應(yīng)的頁面，并get傳 page='1' or '2';
所以無刷新需要做到兩點，阻止頁碼 a鏈接跳轉(zhuǎn) 和 傳值【post 和 get都可以】，ajax傳值到后端控制器時，接收并存入$page即可，一定要存入$page,不能是其他變量名（因為框架封裝的類里面獲取當(dāng)前頁就是從$page中獲取的?。?/p>
具體做法是：
1.進(jìn)入首頁面(帶分頁的頁面)，用js或jQuery 給頁碼a標(biāo)簽阻止跳轉(zhuǎn)；
|
1
|
$('#pag ul li a').attr("href",'javascript:void(0);'); |
2.給各頁碼元素綁定點擊事件，所做的邏輯就是當(dāng)頁碼被點擊時，計算或獲取到要跳轉(zhuǎn)的頁面值。
3.確定了要跳轉(zhuǎn)的頁面值后，然后ajax傳值到后端（傳遞的就是page ，post get方式都可以）。
4.后端控制器獲取到傳值，并存入$page ，其他分頁的邏輯按照正常做法查詢即可，只是查詢出來的數(shù)據(jù)需要組裝成字符串返回去。（返回去的還需要有頁碼字符串，每一次無刷新的頁碼字符串都不同，每切換一個頁面，需要重新再和數(shù)據(jù)更換一次）
4.1為什么定義為$page？ 請去框架tp5 thinkphp/think/db/Query.php 找到paginate方法，入下位置（1333-1338行）：
|
1
2
3
4
5
|
$page = isset($config['page']) ? (int) $config['page'] : call_user_func([ $class, 'getCurrentPage',], $config['var_page']);$page = $page < 1 ? 1 : $page; |
5.返回的數(shù)據(jù)通過jquery填入頁面里，并刪除之前的數(shù)據(jù)元素！
2-5 jquery代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
$(function(){ //去掉分頁的點擊跳轉(zhuǎn) del_jump(); //當(dāng)分頁被點擊時，進(jìn)行無刷新分頁 $("#pag").on('click','ul li a',function(){ //當(dāng)前被點擊的頁碼數(shù) 或者 箭頭 dianji = $(this).html(); current_page = $('.active span').html(); page = ''; if(dianji == "«") { current_page = Number(current_page); page = String(current_page-1); }else if(dianji == "»") { current_page = Number(current_page); page = String(current_page+1); }else{ page = dianji; } //發(fā)送ajax到后臺 $.post("{:url('Virtual/index')}", {'page':page}, function(data){ //將返回的數(shù)據(jù)添加到頁面上去 $('#record_list').html(data.html); $('#pag').html(data.pages); del_jump(); },'json'); }); //去掉分頁的點擊跳轉(zhuǎn) function del_jump() { $('#pag ul li a').attr("href",'javascript:void(0);'); }}); |
希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。
原文鏈接：https://blog.csdn.net/leo_jk/article/details/79260418
