使用ajax分页

Posted 2020-08-25 gaojunshan

前台页面：

                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th class=‘hidden-xs‘>代号</th>
                          <th>用户名</th>
                          <th class=‘hidden-xs‘>产品代号</th>
                          <th class=‘hidden-xs‘>观看类型</th>
                          <th class=‘hidden-xs‘>审核状态</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="zy_bg">
                       
                      </tbody>
                    </table>
                    <!--表格结束-->
                    <!--分页开始-->
                    <center>
                    <ul class="pagination" id="fy_list">
                    </ul>
                    <input type="hidden" value="1" id="fy_n" />//显示的页数
                    </center>
                    <!--分页结束-->
            	
                </div>
            </div>
        
        </div>
    </div>
  </div>
</div>
<!--内容结束-->
<script type="text/javascript"> 
 $(document).ready(function(e) {
	 //获取分页
	JiaZai();
	var zys = 0;//设初始总页数为0
	//页面加载数据
	 function JiaZai()//做一个加载的方法
	{		
		var n = $("#fy_n").val();
           $.ajax({
				url:"chuli/chakan.php",
				data:{n:n},
				type:"POST",
				dataType:"JSON",
				success: function(data){
						var str ="";
						for(var i in data)
						{
						  str = str+"<tr><th>"+data[i].code+"</th><th>"+data[i].bname+"</th><th>"+data[i].pdcode+"</th><th>"+data[i].lxcode+"</th><th>"+data[i].auditing+"</th><th>删除</th></tr>";
							
						}
						$("#zy_bg").html(str);
						
						
			 	   }
			  });
	
			  //获取分页数(列表)
		
		$.ajax({
				url:"chuli/zyxchuli.php",
				dataType:"TEXT",
					success: function(data){
						//总页数
						var ys = Math.ceil(data/6);//向上取整页数 
						zys = ys;
						
						var s = "<li><a id=‘fy_shang‘>上一页</a></li>";
						var dangqian = $("#fy_n").val(); //当前页数
						for(var i=dangqian-2;i<=dangqian+2;i++)//显示的五条页数
						{
							if(i>0 && i<=ys)
							{
							if(dangqian==i)
							{
							s+="<li class=‘active‘><a class=‘fy_zhong‘>"+i+"</a></li>";
							}
							else
							{
								s+="<li><a class=‘fy_zhong‘>"+i+"</a></li>"
							}
							}
						}
						s += "<li><a id=‘fy_xia‘>下一页</a></li>";
						$("#fy_list").html(s);
						
                   		//给分页列表加事件
						JiaShiJian();
					}
				})
	 }
	//给分页列表加事件的方法
	function JiaShiJian()
	{
		$("#fy_shang").click(function(){			
				var n = $("#fy_n").val(); 
				
				if(n>1)
				{
					n--;
				}
				else
				{
					n=1;
				}
				$("#fy_n").val(n);
				
				//加载数据
				JiaZai();
			})
		$("#fy_xia").click(function(){
				var n = $("#fy_n").val(); 
				
				if(n<zys)
				{
					n++;
				}
				else
				{
					n=zys;
				}
				$("#fy_n").val(n);
				
				//加载数据
				JiaZai();
			})
		$(".fy_zhong").click(function(){//点击页数跳转到当前页

				var n = $(this).text();
				$("#fy_n").val(n);
				
				//加载数据
				JiaZai();
			})
	}
		
   });

</script>

　　后台处理页面 需要引用一个封装查询的方法，后台处理页面（chakan.php）:

<?php
session_start();
include("../DBDA.class.php");
$db = new DBDA();
$uid = $_SESSION["uid"];
$n = $_POST["n"];
//echo $n;
$tg = ($n-1)*6;
$sql = "select * from buy where bname=‘{$uid}‘  limit {$tg},6";//查询有关用户名的数据，limit {$tg},6 是跳过n条数据查6条数据

echo json_encode($db->GuanQuery($sql),1);

　　后台处理页面（zyxchuli.php）：

<?php
session_start();
$uid = $_SESSION["uid"];
include("../DBDA.class.php");
$db = new DBDA();
$sqlsj = "select count(*) from buy where bname=‘{$uid}‘";//查询有关用户名的数据总数量
echo $db->StrQuery($sqlsj,1);