Ajax实现无刷新分页实例代码

2024-09-01 08:27:22

字体：大中小

来源：转载

供稿：网友

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

实现Ajax分页：

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

找一张表做分页分页不使用page类页面不用刷新 Ajax加载数据

<!doctype html><html lang="en"><head>  <meta charset="UTF-8" />  <title>Document</title>  <script src="jquery-1.11.2.min.js"></script><style type="text/css">.dangqian{ background-color:#69F}</style></head><body><div>  <input type="text" id="key" />  <input type="button" value="查询" id="chaxun" /></div><table width="50%" border="1" bordercolordark="0" bordercolorlight="0">  <tr>    <td>代号</td>    <td>名称</td>    <td>父级代号</td>  </tr>  <tbody id="neirong"><!--显示内容-->  </tbody></table><div id="fenyexinxi"></div></body><script type="text/javascript">  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 +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号          }          $("#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 += "<span style='text-decoration:underline; cursor:pointer'>总共："+maxys+"页</span> ";  str += "<span id='prev' style='text-decoration:underline; cursor:pointer'>上一页</span>";  for(var i=page-2;i<page+3;i++)  {    if(i>=minys && i<=maxys)    {      if(i==page)      {        str += "<span style='text-decoration:underline; cursor:pointer' class='dangqian' bs='"+i+"'>"+i+"</span> ";      }      else      {        str += "<span style='text-decoration:underline; cursor:pointer' class='list' bs='"+i+"'>"+i+"</span> ";      }    }  }  str += "<span style='text-decoration:underline; cursor:pointer' id='next'>下一页</span>";  $("#fenyexinxi").html(str);  $("#prev").click(function(){      page = page-1;      if(page<1)      {        page=1;      }      Load();      Loadfenyexinxi();    })  $("#next").click(function(){      page = page+1;      if(page>maxys)      {        page=maxys;      }      Load();      Loadfenyexinxi();    })  $(".list").click(function(){      page = parseInt($(this).attr("bs"));      Load();      Loadfenyexinxi();    })}</script></html>

上一篇：ajax实现页面加载和内容删除

下一篇：Servlet 与 Ajax 交互一直报status=parsererror的解决办法