主頁(yè) > 知識(shí)庫(kù) > tp5框架無(wú)刷新分頁(yè)實(shí)現(xiàn)方法分析

tp5框架無(wú)刷新分頁(yè)實(shí)現(xiàn)方法分析

熱門(mén)標(biāo)簽:沛縣400電話辦理 江蘇電商外呼系統(tǒng)運(yùn)營(yíng)商 銅川電話機(jī)器人價(jià)格 AI電話機(jī)器人OEM貼牌 智能電話機(jī)器人好公司門(mén)薩維 德陽(yáng)中江如何申請(qǐng)400開(kāi)頭電話 聊城電話外呼系統(tǒng)公司 青白江地圖標(biāo)注 辦理重慶400電話

本文實(shí)例講述了tp5框架無(wú)刷新分頁(yè)實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:

已tp5 分頁(yè)為例,

1.默認(rèn)生成的分頁(yè) 頁(yè)碼如下:

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)擊頁(yè)碼  值,跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面,并get傳 page='1' or '2';

所以無(wú)刷新需要做到兩點(diǎn),阻止頁(yè)碼 a鏈接跳轉(zhuǎn) 和 傳值【post 和 get都可以】,ajax傳值到后端控制器時(shí),接收并存入$page即可,一定要存入$page,不能是其他變量名(因?yàn)榭蚣芊庋b的類(lèi)里面獲取當(dāng)前頁(yè)就是從$page中獲取的?。?/p>

具體做法是:

1.進(jìn)入首頁(yè)面(帶分頁(yè)的頁(yè)面),用js或jQuery 給頁(yè)碼a標(biāo)簽阻止跳轉(zhuǎn);

$('#pag ul li a').attr("href",'javascript:void(0);');

2.給各頁(yè)碼元素綁定點(diǎn)擊事件,所做的邏輯就是當(dāng)頁(yè)碼被點(diǎn)擊時(shí),計(jì)算或獲取到要跳轉(zhuǎn)的頁(yè)面值。

3.確定了要跳轉(zhuǎn)的頁(yè)面值后,然后ajax傳值到后端(傳遞的就是page ,post  get方式都可以)。

4.后端控制器獲取到傳值,并存入$page ,其他分頁(yè)的邏輯按照正常做法查詢即可,只是查詢出來(lái)的數(shù)據(jù)需要組裝成字符串返回去。(返回去的還需要有頁(yè)碼字符串,每一次無(wú)刷新的頁(yè)碼字符串都不同,每切換一個(gè)頁(yè)面,需要重新再和數(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ù)通過(guò)jquery填入頁(yè)面里,并刪除之前的數(shù)據(jù)元素!

2-5  jquery代碼如下:

$(function(){
  //去掉分頁(yè)的點(diǎn)擊跳轉(zhuǎn)
  del_jump();
  //當(dāng)分頁(yè)被點(diǎn)擊時(shí),進(jìn)行無(wú)刷新分頁(yè)
  $("#pag").on('click','ul li a',function(){
   //當(dāng)前被點(diǎn)擊的頁(yè)碼數(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ù)添加到頁(yè)面上去
     $('#record_list').html(data.html);
     $('#pag').html(data.pages);
     del_jump();
    },'json');
  });
  //去掉分頁(yè)的點(diǎn)擊跳轉(zhuǎn)
  function del_jump() {
    $('#pag ul li a').attr("href",'javascript:void(0);');
  }
});

更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《ThinkPHP入門(mén)教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門(mén)教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門(mén)教程》及《PHP模板技術(shù)總結(jié)》。

希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:
  • tp5框架內(nèi)使用tp3.2分頁(yè)的方法分析
  • TP5框架實(shí)現(xiàn)自定義分頁(yè)樣式的方法示例
  • ThinkPHP分頁(yè)類(lèi)使用詳解
  • ThinkPHP 3.2 數(shù)據(jù)分頁(yè)代碼分享
  • Thinkphp搜索時(shí)首頁(yè)分頁(yè)和搜索頁(yè)保持條件分頁(yè)的方法
  • thinkPHP5分頁(yè)功能實(shí)現(xiàn)方法分析
  • ThinkPHP3.2.3實(shí)現(xiàn)分頁(yè)的方法詳解
  • 在Thinkphp中使用ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)的方法
  • Thinkphp和Bootstrap結(jié)合打造個(gè)性的分頁(yè)樣式(推薦)
  • thinkPHP5框架分頁(yè)樣式類(lèi)完整示例
  • thinkPHP3.2實(shí)現(xiàn)分頁(yè)自定義樣式的方法
  • TP3.2框架分頁(yè)相關(guān)實(shí)現(xiàn)方法分析

標(biāo)簽:濟(jì)寧 迪慶 赤峰 鷹潭 烏魯木齊 山南 三亞 南寧

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《tp5框架無(wú)刷新分頁(yè)實(shí)現(xiàn)方法分析》,本文關(guān)鍵詞  tp5,框架,無(wú),刷新,分頁(yè),實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《tp5框架無(wú)刷新分頁(yè)實(shí)現(xiàn)方法分析》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于tp5框架無(wú)刷新分頁(yè)實(shí)現(xiàn)方法分析的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章