Ajax在不刷新页面的情况下实现分页查询

PHP中文网 • 2025年3月8日 14:51:42 • 编程技术 • 阅读 2

这次给大家带来Ajax在不刷新页面的情况下实现分页查询，Ajax在不刷新页面情况下实现分页查询的注意事项有哪些，下面就是实战案例，一起来看一下。

今天我们要用ajax做一个分页：

实现Ajax分页：

如果可以的话加上查询条件

找一张表做分页

分页不使用page类

页面不用刷新

Ajax加载数据

    Document  .dangqian{ background-color:#69F}    
      代号     名称     父级代号   
  
  
  var page = 1;//定个变量，当前要显示的页  Load();//加载数据  Loadfenyexinxi();//加载分页信息  //查询  $("#chaxun").click(function(){    page = 1;    Load();//加载数据    Loadfenyexinxi();//加载分页信息  })  function Load()  {    var key = $("#key").val();//查询条件。用户输入的内容    $.ajax({      url:"chuli.php",      data: {      page: page,      key: key    },//传2个参数一当前页2关键字也就是查询条件      type:"POST",      dataType:"JSON",      success: function(data){//匿名函数          var str = "";//这个将来要放表格显示的          for(var k in data)//通过K可以获得每一条数据          {//加载数据完成            str +=""+data[k].AreaCode+""+data[k].AreaName+""+data[k].ParentAreaCode+"";//要显示的内容，代号、名称父级代号          }          $("#neirong").html(str);      }    });  }function Loadfenyexinxi()//分页信息{  var str = "";  var minys = 1;//最小页数  var maxys = 1;//最大页数  var key = $("#key").val();//取关键字用于传到zys页面用  $.ajax({    async:false,    type:"POST",    url:"fenye.php",    data:{key:key},    dataType:"TEXT",    success:function(d){        maxys = d;    }  });  str += "总共："+maxys+"页 ";  str += "上一页";  for(var i=page-2;i=minys && i<=maxys)    {      if(i==page)      {        str += ""+i+" ";      }      else      {        str += ""+i+" ";      }    }  }  str += "下一页";  $("#fenyexinxi").html(str);  $("#prev").click(function(){      page = page-1;      if(pagemaxys)      {        page=maxys;      }      Load();      Loadfenyexinxi();    })  $(".list").click(function(){      page = parseInt($(this).attr("bs"));      Load();      Loadfenyexinxi();    })}