ajax实现分页

小咪咪 2022-02-18 15:29 334阅读 0赞

之前写的分页都是a标签直接跳转，这次业务需要不刷新页面实现分页，下面记录原生的实现方法：  
html

//第一页默认展示内容
    <div id='user_list' class="xds-ul" style="margin-top:10vh">
        {loop $xdsrows $key $row}
        <div class="xds-item" style="width: 25vw;height: 105px;;float:left;font-size:12px;padding:2vw;box-sizing:border-box;">
          <div class="xds-head" style="width:21vw;height:80px;">
            <img src="{php echo tomedia($row['userData']['headimgurl'])}" style="width: 21vw;height:80px;border-radius:10px;">
          </div>
            <div class="zdy_ss" style="width:21vw;height:16px;display:flex;justify-content: center;align-items: center;">
              <p class="xds-name" style="text-align:center;width: 14vw;overflow:hidden">{$row['userData']['true_name']} </p>
              <div id="online" style="display:inline-block;width:5px;height:5px;border-radius:2px; background-color:{if $row['userData']['time_interval'] > 600} #777 {else} green {/if}"></div>
            </div>
        </div>
        {/loop}
      </div>
    //分页按钮
    <div class="hg-page">
        
        <ul class="pagination pagination-centered">
          <li class="active2"><a href="javascript:;" class="pager-nav">«上一页</a></li>
          <li class=""><a href="javascript:;" id="nowpage" class="pager-nav">1</a></li>
          <li class="active3"><a href="javascript:;" class="pager-nav">下一页»</a></li>
        </ul>
      </div>

php

//数据条数
    		$count1 = pdo_fetchcolumn("SELECT COUNT(*) FROM ". tablename('zm_muwall_pay_relation_user_room') . "WHERE `uniacid` = :uniacid AND `status` = :status AND `room_id` = :room_id ",array(':uniacid'=>$uniacid, ':status' => 2, ':room_id' => $xds_roomId));
            // pdo_debug();die;
            //分页总数
            $totalpage = ceil($count1/$pagesize);
            //当前页数
                $page = $_GPC['page'];
                if($page < 1) {
                    $page = 1;
                }elseif($page > $totalpage) {
                    $page = $totalpage;
                }
                //页面展示数据（业务需求，可忽略） start
    	            $ajax_xds_data = $xds_userModel->UserSelectRoomAll($xds_roomId, $pagesize, $page);
    	            $ajax_xdsrows = $ajax_xds_data['dataArray'];
    	            foreach ($ajax_xdsrows as $k=>$v) {
    	                $truename = pdo_fetch('select * from ims_zm_muwall_true_user where id=:id',array(':id'=>$v['userData']['t_u_id']));
    	                if(!$truename) {
    	                    $truename['true_name'] = '未实名';
    	                }
    	                $ajax_xdsrows[$k]['userData']['true_name'] = $truename['true_name'];
    	                $ajax_xdsrows[$k]['userData']['time_interval'] = time() - $ajax_xdsrows[$k]['userData']['time_interval'];
    	                $ajax_xdsrows[$k]['userData']['page'] = $page;
    	
    	            }
    	            $user_list1 = [];
    	            foreach ($ajax_xdsrows as $key => $value) {
    	                array_push($user_list1,$value);
    	            }
               //页面展示数据（业务需求，可忽略） end
               //返回数据
                echo json_encode($user_list1);