ajax的分页查询示例(不刷新页面)


Posted in Javascript onJanuary 11, 2017

既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式。进行编写代码

(1)先写个显示数据的页面,分页查询需要那几个部分呢?

1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧

<div>

<input type="text" id="key" /> //输入查询字的文本框

<input type="button" value="查询" id="chaxun" /> //查询按钮,起名字是为了以后给这个按钮加事件,因为只有点击了才可以将文本框的内容进行查询

</div>

看下效果:

ajax的分页查询示例(不刷新页面)

2.接下来就是显示数据了,显示数据必然是要查数据库了,就要用到ajax的方法

先将jQuery的包引入这个显示数据的页面

<script src="../jquery-1.11.2.min.js"></script> //引入jQuery的包

编写想要显示的列的内容,自然是要写表了,写一行,行中有单元格放想要显示内容的字段名(这里显示3种信息)

<table width="50%" border="1" cellpadding="0" cellspacing="0">

<tr><br>

//显示的字段名,这是第一行的内容

    <td>代号</td>

    <td>名称</td>

    <td>父级代号</td>


</tr>  


<tbody id="bg>

<br>
//这里放的就是查找数据库的内容了

  </tbody>  

</table>

现在还没有查看数据库,但是可以先看下显示效果:

ajax的分页查询示例(不刷新页面)

3.现在可以先来查数据库了,这里就要用到ajax了

3.1不过既然是要分页显示,那么会有个默认的第一页,可以先定个变量

var page = 1; //当前页

3.2然后开始写ajax,查询一下数据库了,但是这个会常用到,避免再写很多遍,我们可以写一个方法

function Load()

{

var key = $("#key").val(); //查询条件:因为会用到查询

   


$.ajax({

  url:"fenye_chuli.php", //显示数据的处理页面

  data:{page:page,key:key}, //页数和查询都要传值

  type:"POST",

  dataType:"JSON", //这里我们用JSON的数据格式

  success: function(data){

    //执行完处理页面后写代码

    }

  });

}

3.3再写显示数据的处理页面,这里要考虑的是跳过多少条数据还有想要显示多少条数据

<?php

include("DBDA.class.php"); //调用封装好的类

$db = new DBDA(); //造新对象

$page = $_POST["page"]; //传值页数

$key = $_POST["key"]; //传值关键字<br>

$num = 20; //每页想要显示的数据条数

$tiao = ($page-1)*$num; //显示的当前跳过多少条数据

//查询表中模糊查询名称是关键字,分页是跳过多少条,显示多少条数据

$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";

//执行sql语句

echo $db->JSONQuery($sql);  //调用的是写好的JSON数据格式的处理方式

JSON数据格式是关联数组,所以要进行处理一下,将处理方式封装成类就好

3.4处理页面结束后,就是要写ajax中执行完处理页面后写代码(注意:上面用的是JSON的数据格式,所以要注意字段名要和数据库中的一样,还有就是他是关联数组)

success: function(data){

  var str = "";

  for(var k in data)

  {<br>

 //循环显示的代号、名称、父级代号

  
str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";

  }

  $("#bg").html(str); //将内容放大显示这些数据的地方

}

这样就把想要显示的数据放到bg中了,记得这个方法调用一下

ajax的分页查询示例(不刷新页面)

到此就是显示数据了,但是这样没法实现分页,所以还需要分页,这里就是要放数字了,但是也是需要遍历的,随意放空的就可以

<div id="xinxi">

//显示数字或是上一页

</div>

3.5这个也是可以写成个方法,然后调用

要知道最大能显示多少页,这里可以先定义一个默认最大数,这个最大数也可以是搜索关键字时显示的最大页数

var maxys = 1;

找到关键字的值

var key = $("#key").val();

然后就是写ajax了,查总页数

$.ajax({

  async:false, //因为这个是要同步执行的,所以值是false

  url:"fenye_zys.php", //处理页面

  data:{key:key}, //想要传的值

  type:"POST", //传值方式

  dataType:"TEXT", //这里可以用TEXT字符串的方式

  success: function(d){

      //处理页面结束后的语句

  }

});

接下里就是写处理信息的处理页面了

<?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); //转换成整数

处理页面执行结束后,就要把查到的最大页数交个默认的最大页数

success: function(d){

  maxys = d; //将执行结果交给定义的最大页数

}

这样之后就是要有“上一页”“下一页”,中间的数可以让他每次显示5条

str += "<span>总共:"+maxys+"页</span> ";

str += "<span id='prev'>上一页</span>"; //后面要用到单击事件的,在这起个名字

//循环的当前页

str += "<span id='next'>下一页</span>"; //这个也是要用点击事件的也要起名字

然后再是写循环的页数了

for(var i=page-2;i<page+3;i++) //前后显示2个

{

if(i>=minys && i<=maxys) //页数是要有范围的,大于最小页数,小于最大页数


{

  if(i==page)

  {

  
str += "<span class='dangqian' bs='"+i+"'>"+i+"</span> "; //当前页选中

  }



 else



 {

  
str += "<span class='list' bs='"+i+"'>"+i+"</span> "; //显示当前页



 }

     


}

}

将值传送到div的xinxi处

$("#xinxi").html(str);

最后结果如下图显示:

ajax的分页查询示例(不刷新页面)

接下来就是上一页和下一页的点击事件了,首先是上一页的点击事件

//给上一页添加点击事件

$("#prev").click(function(){

  page = page-1; //当前页减1

  if(page<1)

  {

  page=1;

  }

  Load(); //加载数据

  LoadXinXi(); //加载分页信息

})

再就是下一页的点击事件

//给下一页加点击事件

$("#next").click(function(){

  page = page+1; //当前页加1

  if(page>maxys) 

  {

  page=maxys;

  }

  Load(); //加载数据

  LoadXinXi(); //加载分页信息

})

给循环的数字加点击事件

//给中间的列表加事件

$(".list").click(function(){

  page = parseInt($(this).attr("bs"));

  Load(); //加载数据

  LoadXinXi(); //加载分页信息

})

最后都调用一下就可以了

ajax的分页查询示例(不刷新页面)

4.关键字查询,这里就是要对查询进行加点击事件

("#chaxun").click(function(){

  page = 1;

  Load(); //加载数据

  LoadXinXi(); //加载分页信息

})

 最后整体的显示:

ajax的分页查询示例(不刷新页面)

这样分页查询解结束了,没有刷新页面就可以分页显示,看下整体的效果

(1)分页显示

ajax的分页查询示例(不刷新页面)

(2)查询显示

ajax的分页查询示例(不刷新页面)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
写一个Vue loading 插件
Nov 09 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 #Javascript
Vue数据驱动模拟实现2
Jan 11 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
学习jquery之一
2007/04/27 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
python 如何停止一个死循环的线程
2020/11/24 Python
Python实现微信表情包炸群功能
2021/01/28 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
自荐书范文
2013/12/08 职场文书
创业计划书模版
2014/02/05 职场文书
销售总经理岗位职责
2014/03/15 职场文书
2014年师德承诺书
2014/05/23 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏