用ajax进行分页查询

分页，既能提升用户体验，又减少页面体积，提升加载速度。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。那怎么实现用ajax进行分页查询呢？

实现图：

工具类：

package com.baibu.utils;

public class PageUtil {
   private Integer prevPage=0;
   private Integer nextPage=0;
   private Integer lastPage=0;
   private Integer pageSize;
   private Integer counter;
   private Integer currentPage=0;

   public PageUtil(Integer pageSize,Integer counter,String page) {

       this.pageSize=pageSize;
       this.counter=counter;
       if (page ==null) {
           page="1";
       }
       currentPage=Integer.parseInt(page);
       initLastPage();
       initPrevPage();
       initnextPage();
   }
   private void initnextPage() {
       // TODO Auto-generated method stub
       nextPage=currentPage==lastPage?lastPage:currentPage+1;
   }
   private void initPrevPage() {
       // TODO Auto-generated method stub
       prevPage=currentPage==1?currentPage:currentPage-1;
   }
   private void initLastPage() {
       lastPage=counter/pageSize;
       if (counter%pageSize !=0) {
           lastPage+=1;
       }
   }
   public Integer getPrevPage() {
       return prevPage;
   }
   public void setPrevPage(Integer prevPage) {
       this.prevPage = prevPage;
   }
   public Integer getNextPage() {
       return nextPage;
   }
   public void setNextPage(Integer nextPage) {
       this.nextPage = nextPage;
   }
   public Integer getLastPage() {
       return lastPage;
   }
   public void setLastPage(Integer lastPage) {
       this.lastPage = lastPage;
   }
   public Integer getCurrentPage() {
       return currentPage;
   }
   public void setCurrentPage(Integer currentPage) {
       this.currentPage = currentPage;
   }
   public Integer getPageSize() {
       return pageSize;
   }
   public void setPageSize(Integer pageSize) {
       this.pageSize = pageSize;
   }
   public Integer getCounter() {
       return counter;
   }
   public void setCounter(Integer counter) {
       this.counter = counter;
   }

}

编写回调函数：

但在编写回调函数之前，要先导包：

$(function() {
       $.ajax({
           url:"pageServlet",
           type:"post",
               data:"",
               dataType:"json",
               success:function(obj){
               //   alert(obj[1][0].name+","+obj[1][1].name);

for (var i = 0; i < obj[1].length; i++) {
                   var h="";
                   h +="<tr class='pb'><td>"+obj[1][i].id+"</td><td>"+obj[1][i].name+"</td></tr>";
                   //获取内容；
                   $("#pa").append(h);
               }
                   //$("#pa").html(h);
                   $("#but2").val(obj[0].prevPage);
                   $("#but3").val(obj[0].nextPage);
                   $("#but4").val(obj[0].lastPage);
               }
           });
   });
                    //上面这一步是为了获取第一页内容，
       function fy(obj){

$.ajax({
               url:"pageServlet",
               type:"post",
                   data:{
                      page:obj
                  },
                   dataType:"json",
                   success:function(obj){

                       $(".pb").remove();//删除内容；
                   //   alert(obj[1].length);
                       for (var i = 0; i <obj[1].length; i++) {
                       var h="";
                       h +="<tr class='pb'><td>"+obj[1][i].id+"</td><td>"+obj[1][i].name+"</td></tr>";
                       //$("#pa").append(h);
                       //$("#pa").append(h);
                      $("#pa").append(h);

                       }
                       //$("#pa").html(h);//输出内容；

                       $("#but2").val(obj[0].prevPage);
                       $("#but3").val(obj[0].nextPage);
                       $("#but4").val(obj[0].lastPage);
                   }
               });

}

// 这一步是为了，获取下一页内容和删除上一页内容。

</script>

</table>
    <table>
   <tr>
       <td>
           <button id="but1" class="but" value="首页" οnclick="fy(1)">首页</button>
          <button id="but2" class="but" value="上一页" οnclick="fy(this.value)">上一页</button>
          <button id="but3" class="but" value="下一页" οnclick="fy(this.value)">下一页</button>
          <button id="but4" class="but" value="尾页" οnclick="fy(this.value)">尾页</button>
       </td>
   </tr>
    </table>
        </div>

</body>

//上面这一步是为了建立表格，以上内容属于前端

request.setCharacterEncoding("UTF-8");
       response.setCharacterEncoding("UTF-8");
       response.setContentType("application/json;charset=UTF-8");
       String page=request.getParameter("page");
       if (null==page) {
           page="1";
       }

PageUtil pageUtil=new PageUtil(2, pageDao.getCounter(), page);
       List<AA> list=pageDao.getAAListWithPage((pageUtil.getCurrentPage()-1)*2, 2);
       request.setAttribute("list", list);
       request.setAttribute("pageUtil", pageUtil);
       List<Object> arraylist = new ArrayList<>();
       arraylist.add(pageUtil);
       arraylist.add(list);
       String string = JSON.toJSONString(arraylist);
       System.out.println(string);

response.getWriter().write(string);

//这是数据控制层的代码：整个项目的控制器

public List<AA> getAAListWithPage(Integer i, Integer j) {
       // TODO Auto-generated method stub
       List<AA> list=new ArrayList<AA>();
       Connection connection=null;
       PreparedStatement pst=null;
       ResultSet rs=null;
       String sql="select * from aa limit ?,? ";//即取出从第i行数据（不算第i行）至j+i+1条，共4条记录
       try {
           connection=JDBCUtil.getConnection();
           pst=connection.prepareStatement(sql);
           pst.setInt(1, i);
           pst.setInt(2, j);
           rs=pst.executeQuery();
           AA aa=null;
           while(rs.next()) {
               aa=new AA(rs.getInt(1),rs.getString(2));
               list.add(aa);
           }
       } catch (SQLException e) {
           // TODO: handle exceptio n
           e.printStackTrace();
       }finally {
           JDBCUtil.close(rs, pst, connection);
       }
       for (AA aa : list) {
           System.out.println(aa);
       }
       return list;
   }

@Override
   public Integer getCounter() {
       // TODO Auto-generated method stub
       Integer counter=0;
       Connection connection=null;
       PreparedStatement pst=null;
       ResultSet rs=null;
       String sql="select count(*) from aa";//共有几条数据；
       try {
           connection=JDBCUtil.getConnection();
           pst=connection.prepareStatement(sql);
           rs=pst.executeQuery();

           if(rs.next()) {
               counter=rs.getInt(1);
           }
       } catch (SQLException e) {
           // TODO: handle exception
           e.printStackTrace();
       }finally {
           JDBCUtil.close(rs, pst, connection);
       }
       return counter;
   }

//这是数据处理层的代码

// 以上就是全部代码，如有疑问我会回复。

用ajax进行分页查询相关推荐

php ajax实现查询功能,ajax实现分页查询功能
这次给大家带来ajax实现分页查询功能,ajax实现分页查询功能的注意事项有哪些,下面就是实战案例,一起来看一下. ajax分页查询功能的具体代码,供大家参考,具体内容如下显示的效果如下: 实现效果 ...
php ajax mysql 分页查询_PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: Ajax做分页 .header{ margin-top: 20px; } 关键字: 地区代号地区名称父级代号 2.然后做分页查询JS页面Ajax_ ...
php ajax mysql 分页查询_基于PHP_MySql_Ajax的分页技术方案
一.引言 Ajax的全称是AsynchronousJavaScriptAndXML(异步JavaScript和XML),它不是一项新技术,而是很多成熟的技术的集合. 和Applet,Flash相比,A ...
ajax查询功能查询源码,ajax实现分页查询功能
ajax分页查询功能的详细代码,供大家参考,详细内容如下显示的效果如下: 实现效果的代码如下: 1.fenye.php 无标题文档 .list:hover{ cursor:pointer} #pre ...
ajax高效分页查询,基于 Jquery+Ajax+Json高效分页实现代码
代码如下 using System; using System.Web; using System.Data.SqlClient; using System.Data; using System.Co ...
java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页下一页 2.编写servlet 2.1 先写查询 ...
easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...
springMVC+ajax分页查询
项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...
IntelliJ IDEA中ajax开发实现分页查询
此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下 https://www.jianshu.com/p/1fd6b39e98ac IntelliJ IDEA中ajax开发实现分页查询文 ...

用ajax进行分页查询

用ajax进行分页查询相关推荐

最新文章

热门文章