欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

怎么样通过Ajax实现无刷新分页实例代码

来源:本站整理 作者:佚名 时间:2017-08-23 TAG: 我要投稿

今天我们要用ajax做一个分页:
实现Ajax分页:
如果可以的话加上查询条件
找一张表做分页
分页不使用page类
页面不用刷新
Ajax加载数据
 lang="en">
  charset="UTF-8" />
 Document
  src="jquery-1.11.2.min.js">
 type="text/css">
.dangqian{ background-color:#69F}
  type="text" id="key" />
  type="button" value="查询" id="chaxun" />
 width="50%" border="1" bordercolordark="0" bordercolorlight="0">
 
  代号
  名称
  父级代号
 
  id="neirong">
 
 id="fenyexinxi">
 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 +=""+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;ipage+3;i++)
 {
  if(i>=minys && imaxys)
  {
   if(i==page)
   {
    str += "+i+"'>"+i+" ";
   }
   else
   {
    str += "+i+"'>"+i+" ";
   }
  }
 }
 str += "下一页";
 $("#fenyexinxi").html(str);
 $("#prev").click(function(){
   page = page-1;
   if(page1)
   {
    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();
  })
}
上面是这页面:test.php
php
include("DBDA.class.php");
$db = new DBDA();
//把上个页面的2个值传过来
$page = $_POST["page"];//当前页
$key = $_POST["key"];//条件,关键字
$num = 20;//定义,一页里多少条数据,
$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条
//写$SQL语句
$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiaoshu},{$num}";//根据关键字查like '%{$tiaojian}%'。
echo $db->JSONQuery($sql);
上面是处理页面:chuli.php:
php
include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like '%{$key}%'";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);
上面是分页页面:fenye.php
下面就是我们的显示效果:
随着点击下一页,下面会显示5页,并且是当前页左右各两个页面,每页的显示信息条数可以自己调整。
以上所述是小编给大家介绍的Ajax实现无刷新分页实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的
 

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载