用ajax进行分页查询

1 篇文章 0 订阅
1 篇文章 0 订阅

        分页,既能提升用户体验,又减少页面体积,提升加载速度。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;
    }
      

}

        编写回调函数:

        但在编写回调函数之前,要先导包:

        

            <script type="text/javascript">

                    $(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>

                <body>
        <div >
        <table id="pa" border="3">
        <tr id="xx">
        <th>id</th>
        <th>name</th>
        <!-- <th><ahref="<%=request.getContextPath() %>/page.jsp"></a></th> -->        
    </tr>

    </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;
    }

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值