tp5無重新整理分頁
已tp5 分頁為例,
1.預設生成的分頁 頁碼如下:
<ulclass="pagination">
<li><ahref="?page=1">«</a></li>
<li><ahref="?page=1">1</a></li>
<liclass="active"><span>2</span></li>
<liclass="disabled"><span>»</span></li>
</ul>
所以無重新整理需要做到兩點,阻止頁碼 a連結跳轉 和 傳值【post 和 get都可以】,ajax傳值到後端控制器時,接收並存入$page即可,一定要存入$page,不能是其他變數名(因為框架封裝的類裡面獲取當前頁就是從$page中獲取的!)
具體做法是:
1.進入首頁面(帶分頁的頁面),用js或jQuery 給頁碼a標籤阻止跳轉;
$('#pag ul li a').attr("href",'javascript:void(0);');
2.給各頁碼元素繫結點選事件,所做的邏輯就是當頁碼被點選時,計算或獲取到要跳轉的頁面值。
3.確定了要跳轉的頁面值後,然後ajax傳值到後端(傳遞的就是page ,post get方式都可以)。
4.後端控制器獲取到傳值,並存入$page ,其他分頁的邏輯按照正常做法查詢即可,只是查詢出來的資料需要組裝成字串返回去。(返回去的還需要有頁碼字串,每一次無重新整理的頁碼字串都不同,每切換一個頁面,需要重新再和資料更換一次)
4.1為什麼定義為$page? 請去框架tp5 thinkphp/think/db/Query.php 找到paginate方法,入下位置(1333-1338行):
$page = isset($config['page']) ? (int) $config['page'] : call_user_func([
$class,
'getCurrentPage',
], $config['var_page']);
$page = $page < 1 ? 1 : $page;
5.返回的資料通過jquery填入頁面裡,並刪除之前的資料元素!
2-5 jquery程式碼如下:
$(function(){
//去掉分頁的點選跳轉
del_jump();
//當分頁被點選時,進行無重新整理分頁
$("#pag").on('click','ul li a',function(){
//當前被點選的頁碼數 或者 箭頭
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;
}
//傳送ajax到後臺
$.post("{:url('Virtual/index')}",
{'page':page},
function(data){
//將返回的資料新增到頁面上去
$('#record_list').html(data.html);
$('#pag').html(data.pages);
del_jump();
},'json');
});
//去掉分頁的點選跳轉
function del_jump() {
$('#pag ul li a').attr("href",'javascript:void(0);');
}
});