189 8069 5689

Ajax怎么实现分页查询

这篇文章给大家分享的是有关Ajax怎么实现分页查询的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联专注于汨罗企业网站建设,响应式网站开发,商城开发。汨罗网站建设公司,为汨罗等地区提供建站服务。全流程专业公司,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

要求:

Ajax怎么实现分页查询

获取数据库中大量的信息显示在页面上,必然要使用到分页查询;

若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好,

所以最好使用Ajax的方法写分页查询;

1.先来找一张数据很多的表吧!

Ajax怎么实现分页查询

一张简单的表

代码,引入jquery包:

写一张表格,显示我们的代号跟名称:


 
 
 代号
 名称
 操作
 
 
 
 

这些都很简单,没毛病!

2.设一个当前页,定义一个变量为1(第一页):

 var page = 1;
 //当前页,默认等于1

3.下面来写第一个方法:需要用ajax,这个方法主要起查询,且分页的作用:

function load()
 {
 $.ajax({
  url: "jiazai.php",
// 显示所有的数据不用写data
  data:{page:page},
//当前页记得传过去
  type:"POST",
  dataType: "TEXT",
  success: function (data) {
  }
 });
 }

4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据,用到limit:

Query($sql);

做完了第一步,来看看图:

Ajax怎么实现分页查询

显示数据实现!

好的,每页先是三条数据已经实现了,(页面变成这样我用了美化网页的Bookstrap,前面有讲到)

5.显示分页信息,写一个方法,先用ajax先获取总页数:

function loadfenye()
 {
 var s = "";
 //用于接收
 var xiao = 1;
// 最大页
 var da = 1;
// 最小页
 $.ajax({
 async:false,
//  做成同步
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
 da = data;
 //最大页数
  }
});
 }

接下来做查询总页数的php页面:

strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整

好啦,总页数获取到了,回来把分页写完吧:

//加载分页信息方法
 function loadfenye()
 {
  var s = "";
  //用于接收
  var xiao = 1;
//  最大页
  var da = 1;
//  最小页
  $.ajax({
 async:false,
//   做成同步
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
  da = data;
  //最大页数,查到的最大页数交个默认的最大页数
   }
});
//加载上一页
  s += "
  • «
  • "; //  加载分页列表 for(i=page-4;i=xiao && i<=da)  {   s += " 
  • "+i+"
  • "  } }   //  加载下一页   s += "
  • »
  • "; $("#fenye").html(s);  }

    这样写完了以后,来看图:

    Ajax怎么实现分页查询

    分页的信息也显示出来了

    6.来把默认选中页数的背景色来改变一下吧

    看一下Bookstrap;改背景色的方法吧:

    Ajax怎么实现分页查询

    很显然是多了一个active的样式,我们用判断给加上吧

    if(i>=xiao && i<=da) {
      if (i == page) {
       s += " " + i + ""
      }
      else {
       s += " 
  • " + i + "
  • ";   }

    好了,看一下:

    Ajax怎么实现分页查询

    可以,没毛病

    7.做页数的点击事件,实现点击页数跳转到该页数并显示数据,还要更新列表;

    先给数字列表加上一个class

    s += "

  • " + i + "
  • "

    然后写方法:

    //给列表加上点击事件
      $(".list").click(function(){
       //改变当前页数
       //把点击的页数,扔给page(当前页)
       page = $(this).text();
    //   page获取了当前页,重新加载以下方法
       //调用load方法
       load();
       //把加载数据封装成一个方法
       loadfenye();
       //加载分页信息方法
      })
     }

    当我点击第五页:

    Ajax怎么实现分页查询

    没毛病;

    8.再来就是上一页和下一页的点击事件了,首先是上一页的点击事件:

    首先在上一页的列表里加上class,便于写事件:

    s += "

  • «
  • ";

    来,上一页点击事件:

    $(".sy").click(function(){
       //改变当前页
       if(page>1)
       {
        //如果不是第一页
        page = parseInt(page) - 1;
       }
       //   page获取了当前页,重新加载以下方法
       //调用load方法
       load();
       //把加载数据封装成一个方法
       loadfenye();
       //加载分页信息方法
      })

    下一页的点击事件:

    同上:列表里加上class,便于写事件:

    s += "

  • »
  • "; 

    下一页点击事件:

    //下一页点击事件
      $(".xy").click(function(){
    //   alert(da);
       if(page

    好,完美实现ajax分页查询;

    8.再加一个按条件查询:

    加上文本框:

       

    Ajax怎么实现分页查询

    来写点击事件:

    //给查询加点击事件
     $("#chaxun").click(function(){
      //重新加载
      //调用load方法
      load();
      //把加载数据封装成一个方法
      loadfenye();
      //加载分页信息方法
     })

    接下来我们需要改一下这两个方法:

    ajax只需要把文本框的name传过去就好啦:

    data:{page:page,name:name},
       type:"POST",
    data:{name:name},
     type:"POST",

    在处理页面,设置一个恒等的条件:

    $tj = " 1=1 ";
    if(!empty($_POST["name"]))
    {
     $name = $_POST["name"];
     $tj = " name like '%{$name}%' ";
    }

    最后在sql语句后面调用就好啦

    图:

    Ajax怎么实现分页查询

    页面不刷新的分页查询就欧克了;

    源码:

    显示页面:

    
    
    
     
     无标题文档
     
     
     
    
     .xq{
      margin-left: 5px;
     }
     #fenye li:hover{
      cursor:pointer ;
     }
    
    
    
    

    显示数据

       

          代号   名称   操作        
     
                 ×     详情    
           
            关闭    
        

    查询总页数的页面:

    strquery($sql);
    //总条数
    echo ceil($zts/3);
    //ceil向上取整

    加载分页信息的页面:

    Query($sql);
    //遍历
    $str="";
    foreach ($arr as $v)
    {
     $str = $str.implode("-",$v)."|";
     //用-把$v拼起来,拼出来是1-红2-蓝,用|分割,拼出来是1-红|2-蓝|
    }
    $str = substr($str,0,strlen($str)-1);
    //截取字符串:从第0个开始,截取它的长度-1
    //strlen获取字符串长度
    echo $str;

    感谢各位的阅读!关于“Ajax怎么实现分页查询”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    当前名称:Ajax怎么实现分页查询
    链接分享:http://cdxtjz.cn/article/jgjgsp.html

    其他资讯