文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Ajax怎么实现一个无刷新分页

2023-06-08 07:45

关注

本篇文章为大家展示了使用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>

上面是这页面:test.php

<?phpinclude("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:

<?phpinclude("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);

上述内容就是使用Ajax怎么实现一个无刷新分页,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯