從數據庫讀出的數據分頁在前端顯示

//添加Pager類
package Model;

import java.util.List;

public class Pager<E> {
    //數據總條數?
    private int totalRecord;
    //每一頁顯示的數據條數
    private int pageSize;
    //頁碼數
    private int pageIndex;
    //總頁數
    private int totalPage;
    
    
    //查詢到的數據的集合
    private List<E> datas;

    public int getTotalRecord() {
        return totalRecord;
    }

    public void setTotalRecord(int totalRecord) {
        this.totalRecord = totalRecord;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(int pageIndex) {
        this.pageIndex = pageIndex;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public List<E> getDatas() {
        return datas;
    }

    public void setDatas(List<E> datas) {
        this.datas = datas;
    }
    
    
}

 

 

 

 

Dao類

 

public Pager<Tea_all_info> load(String content, int pageIndex, int pageSize) {
        Pager<Tea_all_info> pager = new  Pager<Tea_all_info>();
        Connection connection = DBUtil.getConnection();
        //創建語句傳輸對象
        PreparedStatement preparedStatement = null;
        ResultSet rs = null;
        //准備sql語句
        String sql = "select * from tea_all_info ";
        //數據總條數
        String  sqlCount = "select count(*) from tea_all_info";
        //集合中只能放入user對象
        List<Tea_all_info> tais = new ArrayList<Tea_all_info>();
        Tea_all_info tai = null;
        try {
            if (pageIndex <= 0) {
                pageIndex = 1;
            }
            
            int start = (pageIndex-1)*pageSize;
            
//            if (content != null && !"".equals(content)) {
//                sql += " where username like '%" +content+"%'" + "or name like '%" +content + "%'";
//                sqlCount += " where username like '%" +content+"%'" + "or name like '%" +content + "%'";
//            }
            System.out.println(sql);
            preparedStatement = connection.prepareStatement(sqlCount);
            rs = preparedStatement.executeQuery();
            
            //總記錄數
            int totalRecord = 0;
            
            while(rs.next()) {
                totalRecord = rs.getInt(1);
            }    
            //總頁數
            int totalPage = totalRecord%pageSize == 0 ? totalRecord/pageSize : totalRecord/pageSize + 1;
            
            //加分頁
            sql += " limit ?,?";

            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setInt(1, start);
            preparedStatement.setInt(2, pageSize);
            rs = preparedStatement.executeQuery();
            //System.out.println(sql+"模糊查詢");
            while(rs.next()) {
                tai = new Tea_all_info();
                tai.setId(rs.getInt("id"));
                tai.setTea_name(rs.getString("tea_name"));
                tai.setTea_brand(rs.getString("tea_brand"));
                tai.setTea_store(rs.getString("tea_store"));
                tai.setTea_img(rs.getString("tea_img"));
                tai.setTea_big_type(rs.getString("tea_big_type"));
                tai.setTea_comment_count(rs.getString("tea_comment_count"));
                tai.setTea_AverageScore(rs.getString("tea_AverageScore"));
                tai.setTea_GoodCount(rs.getString("tea_GoodCount"));
                tai.setTea_DefaultGoodCount(rs.getString("tea_DefaultGoodCount"));
                tai.setTea_GoodRate(rs.getString("tea_GoodRate"));
                tai.setTea_AfterCount(rs.getString("tea_AfterCount"));
                tai.setTea_VideoCount(rs.getString("tea_VideoCount"));
                tai.setTea_PoorCount(rs.getString("tea_PoorCount"));
                tai.setTea_GeneralCount(rs.getString("tea_GeneralCount"));
                tai.setTea_id(rs.getString("tea_id"));
                tai.setTea_detail(rs.getString("tea_detail"));
                tai.setTea_price(rs.getString("tea_price"));
                tai.setTea_source(rs.getString("tea_source"));        
                tais.add(tai);
            }    
            //往分頁對象里面設置數據
            pager.setDatas(tais);
            pager.setPageIndex(pageIndex);
            pager.setPageSize(pageSize);
            pager.setTotalPage(totalPage);
            pager.setTotalRecord(totalRecord);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            DBUtil.close(rs);
            DBUtil.close(preparedStatement);
            DBUtil.close(connection);
        }
        return pager;
    }

 

 

jsp調用Java代碼，獲取數據集合

request.setCharacterEncoding("utf-8");
                       int pageIndex = 1;
                       int pageSize = 10;
                       try{
                           pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
                       }catch(Exception e){
                       }
                           
                           String content = request.getParameter("content");
                           if(content == null || "".equals(content)){
                               content = "";        
                           }
                           Tea_all_infoDao taid = new Tea_all_infoDao();
                           //List<User> users = userDao.load(content);
                           Pager pager = taid.load(content, pageIndex, pageSize);
                           //獲得pager中保存的list集合
                           List<Tea_all_info> tais = pager.getDatas();

之后自己寫個循環輸出顯示的數據，布局等

 

 

頁碼顯示（這里我找的是div+css那種普通的分頁模式，jqurey的很精美，但我不會改，暫且這樣）

<div class="tres"> 
<span class="disabled">&lt; </span>
<a href="product-list.jsp?pageIndex=1&content=<%=content %>">首頁</a>
<%
                    int totalPage = pager.getTotalPage();
                    if(pageIndex > 1){
                %>
                    <a href="product-list.jsp?pageIndex=<%=pageIndex-1 %>&content=<%=content %>">上一頁</a>
                <%
                    }
                %>
<a href="product-list.jsp?pageIndex=2&content=<%=content %>">2</a>
<a href="product-list.jsp?pageIndex=3&content=<%=content %>">3</a>
<a href="product-list.jsp?pageIndex=4&content=<%=content %>">4</a>
<a href="product-list.jsp?pageIndex=5&content=<%=content %>">5</a>
<a href="product-list.jsp?pageIndex=6&content=<%=content %>">6</a>...
<a href="product-list.jsp?pageIndex=<%=totalPage-1 %>&content=<%=content %>"><%=totalPage-1 %></a>
<a href="product-list.jsp?pageIndex=<%=totalPage %>&content=<%=content %>"><%=totalPage %></a>

<%
                    if( pageIndex < totalPage){
                %>
                    <a href="product-list.jsp?pageIndex=<%=pageIndex + 1 %>&content=<%=content %>">下一頁</a>
                <%
                    }
                %>
                    <a href="product-list.jsp?pageIndex=<%=totalPage%>&content=<%=content %>">尾頁</a>
</div> 

 

 

CSS

/* CSS 翻頁代碼 */ 
DIV.tres { 
PADDING-RIGHT: 7px; PADDING-LEFT: 7px; FONT-WEIGHT: bold; 
FONT-SIZE: 13.2pt; PADDING-BOTTOM: 7px; MARGIN: 3px; 
PADDING-TOP: 7px; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: center 
} 
DIV.tres A { 
BORDER-RIGHT: #d9d300 2px solid; PADDING-RIGHT: 5px;
 BORDER-TOP: #d9d300 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; 
MARGIN: 2px; BORDER-LEFT: #d9d300 2px solid; COLOR: #fff; PADDING-TOP: 2px;
 BORDER-BOTTOM: #d9d300 2px solid; BACKGROUND-COLOR: #d90; TEXT-DECORATION: none 
} 
DIV.tres A:hover { 
BORDER-RIGHT: #ff0 2px solid; BORDER-TOP: #ff0 2px solid; 
BORDER-LEFT: #ff0 2px solid; COLOR: #000; BORDER-BOTTOM: #ff0 2px solid;
 BACKGROUND-COLOR: #ff0 
} 
DIV.tres A:active { 
BORDER-RIGHT: #ff0 2px solid; BORDER-TOP: #ff0 2px solid; 
BORDER-LEFT: #ff0 2px solid; COLOR: #000; 
BORDER-BOTTOM: #ff0 2px solid; BACKGROUND-COLOR: #ff0 
} 
DIV.tres SPAN.current { 
BORDER-RIGHT: #fff 2px solid; PADDING-RIGHT: 5px; 
BORDER-TOP: #fff 2px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
 PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 2px solid;
 COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 2px solid 
} 
DIV.tres SPAN.disabled { 
DISPLAY: none 
} 

可以自行修改樣式