本文實(shí)例講述了tp5框架無刷新分頁實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
已tp5 分頁為例，
1.默認(rèn)生成的分頁 頁碼如下：
ul class="pagination">
li>a href="?page=1" rel="external nofollow" rel="external nofollow" >laquo;/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>raquo;/span>/li>
/ul>
2.點(diǎn)擊頁碼 值，跳轉(zhuǎn)到對(duì)應(yīng)的頁面，并get傳 page='1' or '2';
所以無刷新需要做到兩點(diǎn)，阻止頁碼 a鏈接跳轉(zhuǎn) 和 傳值【post 和 get都可以】，ajax傳值到后端控制器時(shí)，接收并存入$page即可，一定要存入$page,不能是其他變量名（因?yàn)榭蚣芊庋b的類里面獲取當(dāng)前頁就是從$page中獲取的！）
具體做法是：
1.進(jìn)入首頁面(帶分頁的頁面)，用js或jQuery 給頁碼a標(biāo)簽阻止跳轉(zhuǎn)；
$('#pag ul li a').attr("href",'javascript:void(0);');
2.給各頁碼元素綁定點(diǎn)擊事件，所做的邏輯就是當(dāng)頁碼被點(diǎn)擊時(shí)，計(jì)算或獲取到要跳轉(zhuǎn)的頁面值。
3.確定了要跳轉(zhuǎn)的頁面值后，然后ajax傳值到后端（傳遞的就是page ，post get方式都可以）。
4.后端控制器獲取到傳值，并存入$page ，其他分頁的邏輯按照正常做法查詢即可，只是查詢出來的數(shù)據(jù)需要組裝成字符串返回去。（返回去的還需要有頁碼字符串，每一次無刷新的頁碼字符串都不同，每切換一個(gè)頁面，需要重新再和數(shù)據(jù)更換一次）
4.1為什么定義為$page？ 請(qǐng)去框架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.返回的數(shù)據(jù)通過jquery填入頁面里，并刪除之前的數(shù)據(jù)元素！
2-5 jquery代碼如下：
$(function(){
//去掉分頁的點(diǎn)擊跳轉(zhuǎn)
del_jump();
//當(dāng)分頁被點(diǎn)擊時(shí)，進(jìn)行無刷新分頁
$("#pag").on('click','ul li a',function(){
//當(dāng)前被點(diǎn)擊的頁碼數(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到后臺(tái)
$.post("{:url('Virtual/index')}",
{'page':page},
function(data){
//將返回的數(shù)據(jù)添加到頁面上去
$('#record_list').html(data.html);
$('#pag').html(data.pages);
del_jump();
},'json');
});
//去掉分頁的點(diǎn)擊跳轉(zhuǎn)
function del_jump() {
$('#pag ul li a').attr("href",'javascript:void(0);');
}
});
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- tp5框架內(nèi)使用tp3.2分頁的方法分析
- TP5框架實(shí)現(xiàn)自定義分頁樣式的方法示例
- ThinkPHP分頁類使用詳解
- ThinkPHP 3.2 數(shù)據(jù)分頁代碼分享
- Thinkphp搜索時(shí)首頁分頁和搜索頁保持條件分頁的方法
- thinkPHP5分頁功能實(shí)現(xiàn)方法分析
- ThinkPHP3.2.3實(shí)現(xiàn)分頁的方法詳解
- 在Thinkphp中使用ajax實(shí)現(xiàn)無刷新分頁的方法
- Thinkphp和Bootstrap結(jié)合打造個(gè)性的分頁樣式(推薦)
- thinkPHP5框架分頁樣式類完整示例
- thinkPHP3.2實(shí)現(xiàn)分頁自定義樣式的方法
- TP3.2框架分頁相關(guān)實(shí)現(xiàn)方法分析
