ajax实现分页

之前写的分页都是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">
    <!-- {$xdspager} -->
    <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>

js

      var page = 1;//默认页面1
      $(function(){
      //上一页
          $(document).on('click', '.active2', function() {
	        var data = {"page": --page};
	        if(page < 1) {
	          confirm("已经是第一页，不要再点啦");
	          page = ++page;
	        }
	          $.post('',data,function(data) {
	            //把后台传的数据转成json数据
	            var res = JSON.parse(data);
	            $('#user_list').html('');
	            //业务需要（可忽略）  start
		            for(var i = 0;i<res.length;i++){
		              if(res[i].userData.time_interval > 600) {
		                 color = "#777";
		              }else{
		                 color = "green";
		              }
	              //业务需要（可忽略）  end
	              //渲染当前页面内容
	              document.getElementById('user_list').innerHTML+='<div style="width: 25vw;height: 105px;float:left;font-size:12px;padding:2vw;box-sizing:border-box;"><div style="width: 21vw;height:80px;"><img style="21vw;height:80px;border-radius:10px;" src="'+res[i].userData.headimgurl+'"></div><div style="width:21vw;height:16px;display:flex;justify-content: center;align-items: center;"><p style="text-align:center;width: 14vw;overflow:hidden;">'+res[i].userData.true_name+'</p><div style="display:inline-block;width:5px;height:5px;border-radius:2px;background-color:'+color+'"></div></div></div>'
	              //当前页面页数
	              document.getElementById('nowpage').innerHTML = '<li class="active2"><a href="javascript:;" class="pager-nav">'+res[i].userData.page+'</a></li>'
	            }
	
	          });
	         
	      });
	      //下一页（逻辑同上）
	         $(document).on('click', '.active3', function() {
	          var data = {"page": ++page};
	          if(page > {php echo $totalpage}) {
	            confirm("已经是最后一页，不要再点啦");
	            page = --page;
	          }
	          $.post('',data,function(data) {
	          var res = JSON.parse(data);
	          $('#user_list').html('');
	          for(var i = 0;i<res.length;i++){
	            if(res[i].userData.time_interval > 600) {
	               color = "#777";
	            }else{
	               color = "green";
	            }
	            document.getElementById('user_list').innerHTML+='<div style="width: 25vw;height: 105px;float:left;font-size:12px;padding:2vw;box-sizing:border-box;"><div style="width: 21vw;height:80px;"><img style="21vw;height:80px;border-radius:10px;" src="'+res[i].userData.headimgurl+'"></div><div style="width:21vw;height:16px;display:flex;justify-content: center;align-items: center;"><p style="text-align:center;width: 14vw;overflow:hidden;">'+res[i].userData.true_name+'</p><div style="display:inline-block;width:5px;height:5px;border-radius:2px;background-color:'+color+'"></div></div></div>'
	            document.getElementById('nowpage').innerHTML = '<li class="active2"><a href="javascript:;" class="pager-nav">'+res[i].userData.page+'</a></li>'
	            
	          }
	
	          });
	      });
         
      })
    

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);