tp5的ajax分页实现

首页 > 代码库 > tp5的ajax分页实现

2024-10-12 04:09:02 214人阅读

最近都在基于tp5的框架做项目，tp5里有现成的分页，可以直接用，但是要刷新页面的翻页，客户不愿意，所以要用ajax技术来实现页面的无刷新分页，下面开始通过贴代码来说明，由于是直接从项目里拿出来的，不明白的地方我尽量用注释解释明白。

HTML部分有两部分组成：内容部分和页码部分。

 1 <div class="info-list">
 2       <ul id="ul_list_b">
 3             <!--内容部分-->
 4       </ul>
 5 
 6       <nav aria-label="..." class="pg-pager"><!--页码部分-->
 7       <ul class="pagination" id="page" style="min-width: 300px">
 8           <li id="pre_b" style="display: block;"><span aria-hidden="true"><</span></li>
 9           <li id="page--" style="display: none;"><span aria-hidden="true">...</span></li>
10           <li id="page-4" style="display: none;"><span aria-hidden="true"></span></li>
11           <li id="page-3" style="display: none;"><span aria-hidden="true"></span></li>
12           <li id="page-2" style="display: none;"><span aria-hidden="true"></span></li>
13           <li id="page-1" style="display: none;"><span aria-hidden="true"></span></li>
14           <li id="page-0" style="display: none;"><span aria-hidden="true"></span></li>
15           <li id="pagep1" style="display: none;"><span aria-hidden="true"></span></li>
16           <li id="pagep2" style="display: none;"><span aria-hidden="true"></span></li>
17           <li id="pagep3" style="display: none;"><span aria-hidden="true"></span></li>
18           <li id="pagep4" style="display: none;"><span aria-hidden="true"></span></li>
19           <li id="pagepp" style="display: none;"><span aria-hidden="true">...</span></li>
20           <li id="next_b" style="display: block;"><span aria-hidden="true">></span></li>
21         </ul>
22       </nav>
23     </div>

js部分

　<script>
  var page_size={$size};
  </script>
  <script >
    var page_cur; //当前页码
    var max_cur; //最大页码
    var json; //总的数据
    //获取数据 
    function showContent(page_cur){
      if(!page_cur){page_cur=1;}
      // console.log(page_cur);
      $.ajax( {
        type: ‘GET‘, 
        url: "__ROOT__/index.php/index/index/invests", //tp这里的地址对应着方法
        data: {page:page_cur}
        , 

        dataType: ‘json‘, 
        success: function(data) {
          json=data.list;
          len=data.count;
          page_size={$size};
          max_cur=Math.ceil(len / page_size);
          page_cur=parseInt(data.page);
          //console.log(json, max_cur);
          console.log(data,max_cur,page_size,page_cur);
          $(‘#ul_list_b‘).html(‘‘);
          for(var i=0; i < json.length; i++) {
              var path=json[i].path;
              var id=json[i].id;
              var day=json[i].day;
              var yearmonth=json[i].yearmonth;
              var title=json[i].title;
              var content=json[i].content;
              $(‘<li class="info-item"><a href="http://www.mamicode.com/investment_detail/id/‘+id+‘" class="img"><img src="http://www.mamicode.com/‘+path+‘"></a><div class="text"><div class="date"><strong>‘+day+‘</strong><span>‘+yearmonth+‘</span></div><div class="brief"><h3><a href="http://www.mamicode.com/investment_detail/id/‘+id+‘">‘+title+‘</a></h3><p><a href="http://www.mamicode.com/investment_detail/id/‘+id+‘">‘+content+‘...</a></p></div></div></li>‘).appendTo($(‘#ul_list_b‘));
          }

          //以下是页码的生成
          if(max_cur == 1){
            $(‘#page‘).html(‘‘);
          }
          if(max_cur < 6){
            noneall();
            changeinner(‘page-0‘,page_cur);
            for(var i=page_cur-1; i>0; i--){
              changeinner(‘page-‘+i, page_cur-i);
            }
            for(var i=1; i<max_cur-page_cur+1; i++){
              changeinner(‘pagep‘+i, page_cur+i);
            }
          }else{
            noneall();
            if(page_cur>3) changeinner(‘page--‘,‘...‘);
            if(page_cur<max_cur-2) changeinner(‘pagepp‘,‘...‘);

            if(page_cur<3){
              for(var i=page_cur-1; i>0; i--){
                changeinner(‘page-‘+i, page_cur-i);
              }
              for(var i=1; i<6-page_cur; i++){
                changeinner(‘pagep‘+i, page_cur+i);
              }
              
            }else if(page_cur+2>max_cur){
              for(var i=max_cur-page_cur; i>0; i--){
                changeinner(‘pagep‘+i, page_cur+i);
              }
              for(var i=1; i<6-(max_cur-page_cur+1); i++){
                changeinner(‘page-‘+i, page_cur-i);
              }
            }else{
              changeinner(‘page-1‘, page_cur-1);
              changeinner(‘page-2‘, page_cur-2);
              changeinner(‘pagep1‘, page_cur+1);
              changeinner(‘pagep2‘, page_cur+2);
            }
            changeinner(‘page-0‘,page_cur);
          }
          
        },
        error: function() {
          console.log("chucuo");
          //alert("数据加载失败1");
        }
      })
      return page_cur;
    };

    function changeinner(idname,content) {
      var obj = document.getElementById(idname);
      obj.style.display= "block";
      obj.innerHTML= ‘<span aria-hidden="true">‘+content+‘</span>‘;
    }

    function noneinner(idname,content) {
      var obj = document.getElementById(idname);
      obj.style.display= "none";
      obj.innerHTML= ‘<span aria-hidden="true"></span>‘;
    }

    function noneall() {
      for(var i=1;i<5;i++){
        noneinner(‘page-‘+i,‘‘);
        noneinner(‘pagep‘+i,‘‘);
      }
      noneinner(‘page-0‘,‘‘);
      noneinner(‘page--‘,‘‘);
      noneinner(‘pagepp‘,‘‘);
      
    }



    page_cur = showContent();
    max_cur = Math.ceil(parseInt({$count}) / parseInt({$size}));
    page_size = {$size};
    console.log(page_cur, max_cur, page_size);
    
    $(‘#pre_b‘).on(‘click‘, function() {
      if(page_cur !=1) {
        page_cur--;
        showContent(page_cur);
      }
    });

    $(‘#next_b‘).on(‘click‘, function() {
      
      if(page_cur !=max_cur) {
        page_cur++;
        showContent(page_cur);
      }
    });

    $(‘#page-1‘).on(‘click‘, function() {
      page_cur-=1;
      showContent(page_cur);
    });
    $(‘#page-2‘).on(‘click‘, function() {
      page_cur-=2;
      showContent(page_cur);
    });
    $(‘#page-3‘).on(‘click‘, function() {
      page_cur-=3;
      showContent(page_cur);
    });
    $(‘#page-4‘).on(‘click‘, function() {
      page_cur-=4;
      showContent(page_cur);
    });


      $(‘#pagep1‘).on(‘click‘, function() {
      page_cur+=1;
      showContent(page_cur);
    });
    $(‘#pagep2‘).on(‘click‘, function() {
      page_cur+=2;
      showContent(page_cur);
    });
    $(‘#pagep3‘).on(‘click‘, function() {
      page_cur+=3;
      showContent(page_cur);
    });
    $(‘#pagep4‘).on(‘click‘, function() {
      page_cur+=4;
      showContent(page_cur);
    });


    $(‘#page--‘).on(‘click‘, function() {
      page_cur=1;
      showContent(page_cur);
    });
    $(‘#pagepp‘).on(‘click‘, function() {
      page_cur=max_cur;
      showContent(page_cur);
    });
  </script>

PHP部分：

public function invests()
    {
        
        $size = 4;//每页显示数量
        $invests = Db::table(‘sri_investment)->where(‘status‘,1)->order(‘id‘)->limit(($page-1)*$size, $size)->select();
        $count = Db::table(‘sri_investment)->where(‘status‘,1)->order(‘id‘)->count();
        
        foreach ($invests as $k => $v) {
            $day = date(‘d‘, $v[‘create_time‘]);
            $yearmonth = date(‘Y-m‘, $v[‘create_time‘]);
            $sub_content = $v[‘content‘];

            $arr[‘list‘][] = array(‘id‘ =>$v[‘id‘], 
                                    ‘path‘ =>$v[‘path‘],
                                    ‘day‘ =>$day,
                                    ‘yearmonth‘ =>$yearmonth,
                                    ‘title‘ =>$v[‘title‘],
                                    ‘content‘ =>$sub_content,
                                     );
        }
        $arr[‘page‘] = $page;
        $arr[‘count‘] = $count;
        echo json_encode($arr);
    }

下面是页码的样式，显示最多显示5个数字，省略号代表后面还有页码。（这个页码写了好久，主要是我的逻辑没缕清楚，加上熬夜，脑袋转不过来了，所以，大家还是少熬夜！）

技术分享

第一次写这个技术类型的，有什么说不清楚的，请留言问吧，我知道的一定说清楚。

tp5的ajax分页实现

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > tp5的ajax分页实现

tp5的ajax分页实现

看完仍有疑问？有类似问题直接问程序猿