分页(对全部数据进行分页)

需求:
1 . 对全部数据进行分页;
2 . 对根据查询(模糊查询)出来的数据进行分页.
1: 步骤:
要有jsp界面代码–>这个代码的script标签中主要是showPageData函数(进行显示当前页的数据)–>则需要在这个函数里面进行查询数据–>就需要把当前页数和每页的数据条数传到servlet(通过ajax)–>service–>dao层进行查询–>返回的数据给一个实体类–>xhr获取实体类,进行json解析
具体的还是要看代码:
one:首先有一个Book的实体类,用来定义书的一些定义和方法

package com.lm.domain;

public class Book {
    private int id;
    private String num;
    private String bookname;
    private String author;
    private double price;
    private String publish;
    private String imgurl;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getNum() {
        return num;
    }
    public void setNum(String num) {
        this.num = num;
    }
    public String getBookname() {
        return bookname;
    }
    public void setBookname(String bookname) {
        this.bookname = bookname;
    }
    public String getAuthor() {
        return author;
    }
    public void setAuthor(String author) {
        this.author = author;
    }
    public double getPrice() {
        return price;
    }
    public void setPrice(double price) {
        this.price = price;
    }
    public String getPublish() {
        return publish;
    }
    public void setPublish(String publish) {
        this.publish = publish;
    }
    public String getImgurl() {
        return imgurl;
    }
    public void setImgurl(String imgurl) {
        this.imgurl = imgurl;
    }
    @Override
    public String toString() {
        return "Book [id=" + id + ", num=" + num + ", bookname=" + bookname + ", author=" + author + ", price=" + price
                + ", publish=" + publish + ", imgurl=" + imgurl + "]";
    }



}

这个实体类是用来存储一个页面的一些数据的,包括当前页是第几页,每页的数据内容(存在集合中),和总页数.

package com.lm.domain;

import java.util.List;

public class BookBean {
    private  int pageNo;//当前页
    private List<Book> list;//每页的数据内容
    private  int totalPage;//总页数
    public int getPageNo() {
        return pageNo;
    }
    public void setPageNo(int pageNo) {
        this.pageNo = pageNo;
    }
    public List<Book> getList() {
        return list;
    }
    public void setList(List<Book> list) {
        this.list = list;
    }
    public int getTotalPage() {
        return totalPage;
    }
    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }
    @Override
    public String toString() {
        return "BookBean [pageNo=" + pageNo + ", list=" + list + ", totalPage=" + totalPage + "]";
    }

}

two:jsp页面以及一些函数,最重要的是showPageData函数.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/xhr.js"></script>
<script type="text/javascript">

var pageNO1 =1; //当前页   
var totalPage1 =1; //总页数  Math.ceil(totalCount/pageSize); 总条书/每页的条数
    window.onload = function() {
        showPageData(1);
    }

    function showPageData(pageNum) {
        //展示当前页和总页数的控件 ,示例:1/100
        var showPage = document.getElementById("showPage");//   1/10  的<span>
        var inputPage= document.getElementById("inputPage"); //  input 跳转到  多少  页
        var contentDiv = document.getElementById("content"); // 整个的div
        var xhr = getXMLHttpRequest();
        xhr.open("get", "ShowBookByPageServlet?pageNo=" + pageNum+ "&pageSize=5");
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = xhr.responseText;
                    var jsonStr = JSON.parse(result);

                    //取值显示当前页和总页数
                     pageNO1 = jsonStr.pageNo;
                     totalPage1 = jsonStr.totalPage;
                     showPage.innerHTML = pageNO1 + "/" + totalPage1;

                     inputPage.value= pageNO1;
                    //获取每页要展示的数据集合
                     var contentList = jsonStr.list;
                     var contentData = "<table border='1' width='70%''><tr><td>序号</td><td>编号</td><td>书名</td><td>作者</td><td>价格</td><td>出版社</td><td>图片</td><td>删除</td></tr>";
                     for (var i = 0; i < contentList.length; i++) {
                        var item = contentList[i];
                        contentData += "<tr><td>" + item.id + "</td><td>"
                                + item.num + "</td><td>" + item.bookname
                                + "</td><td>" + item.author + "</td><td>"
                                + item.price+ "</td><td>"
                                + item.publish + "</td><td>"
                                + item.imgurl +"</td><td>"
                                + "<a href='${pageContext.request.contextPath}/DeleteByNumServlet?num="+item.num+"'><input type='button' value='删除'></a>"
                                +"</td></tr>";
                    }
                    contentData += "</table>"
                    contentDiv.innerHTML = contentData;
                }
            }

        }
    }

    function JumpPage() {
        var inputPage = document.getElementById("inputPage");
        showPageData(inputPage.value);
    }

    function ShowFirst() {
        showPageData(1);
    }
    function ShowPre() {
        if(pageNO1<=1){
            pageNO1=1;
            alert("已经是第一页了");
        }else{
            pageNO1=pageNO1-1;
        }
        showPageData(pageNO1);
    }
    function ShowNext() {
        if(pageNO1>=totalPage1){
            pageNO1=totalPage1;
            alert("已经是最后一页了");
        }else{
            pageNO1=pageNO1+1;
        }
        showPageData(pageNO1);
    }
    function ShowLast() {
        showPageData(totalPage1);
    }
</script>

</head>
<body style="align:center; margin-top: 200px;margin-left: 400px">
<form action="findshow.jsp"  method="post">
<table>
 <tr>
   <td><input type="submit" name="sousuo" value="按照书名查询" ></td>
 </tr>
</table>
</form>
<div id="content"></div>

    <br>
    <br>
    <input type="button" value="首页" onclick="ShowFirst()" />
    <input type="button" value="上一页" onclick="ShowPre()" />
    <span id="showPage"></span>
    <input type="button" value="下一页" onclick="ShowNext()" />
    <input type="button" value="尾页" onclick="ShowLast()" /> 跳转到
    <input type="text" name="inputPage" id="inputPage" value="1" 
    style="text-align: center;"/><input type="button" value="确定" onclick="JumpPage()" />

</body>
</html>

three: servlet

package com.lm.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.lm.domain.BookBean;
import com.lm.service.BookService;
import com.lm.service.impl.BookServiecImpl;


import net.sf.json.JSONObject;

/**
 * Servlet implementation class ShowBookByPageServlet
 */
public class ShowBookByPageServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //1.获取请求参数
        String pageNo= request.getParameter("pageNo");//当前页  1
        String pageSize= request.getParameter("pageSize"); //每页的条数  10
        int pageNo1= Integer.parseInt(pageNo);
        int pageSize1= Integer.parseInt(pageSize);
        BookService service= new  BookServiecImpl();
        BookBean bookBean = service.getDateByPage(pageNo1,pageSize1); //把当前页和每页的条数传过去
        JSONObject jsonObject =JSONObject.fromObject(bookBean);

        response.getWriter().write(jsonObject.toString());
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

four: service

BookDao bookDao=new BookDaoImpl();
    @Override
    public BookBean getDateByPage(int pageNo1, int pageSize1) {
        // TODO Auto-generated method stub
        BookBean bookBean =new BookBean();
        try {
            bookBean.setPageNo(pageNo1);//给当前页属性赋值
             //获取表中总的条数
            long totalCount = bookDao.queryTotalCount();
            //计算总页数
            int totalPage  = (int)Math.ceil(totalCount*1.0/pageSize1);
            bookBean.setTotalPage(totalPage);
            List<Book> list = bookDao.queryShoList(pageNo1, pageSize1);
            bookBean.setList(list);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return bookBean;
    }

five:
dao层

public List<Book> queryShoList(int pageNo, int pageSize) throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
        String sql="select * from book limit ?,?";
        //select * from tablename limit 10,20      从第11条到31条(共计20条)
        List<Book>  list = queryRunner.query(sql, new  BeanListHandler<Book>(Book.class),(pageNo-1)*pageSize,pageSize);
        return list;
    }

总结:要注意刚开始是默认显示第一页的数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值