1. 程式人生 > >tp5無重新整理分頁

tp5無重新整理分頁

已tp5 分頁為例,

1.預設生成的分頁 頁碼如下:

  1. <ulclass="pagination">
  2. <li><ahref="?page=1">&laquo;</a></li>
  3. <li><ahref="?page=1">1</a></li>
  4. <liclass="active"><span>2</span></li>
  5. <liclass="disabled"><span>&raquo;</span></li>
  6. </ul>
2.點選頁碼  值,跳轉到對應的頁面,並get傳 page='1' or '2';

所以無重新整理需要做到兩點,阻止頁碼 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);');
            }
        });