1. 程式人生 > >總結之java web實現分頁功能(一)

總結之java web實現分頁功能(一)

網頁開發離不開分頁,分頁如何實現呢

  • 可以看一下百度的分頁有什麼功能
    這裡寫圖片描述

  • 上一頁、下一頁、10頁按鈕、一頁顯示10條資訊

定義一個 PageResult類專門返回分頁所需資訊##

public class PageResult {
    //滿足條件的總記錄數
    private int count;
    //當前頁數
    private int pageNo;
    //每頁顯示的條數
    private int pageSize;
    //總頁數
    private int pageCount;
    //內容
    private uLt reslts;  
 //get和set方法省了

}

看看資料庫提供了什麼分頁功能

SELECT * FROM user ORDER BY userId ASC limit 1,10

這表示從第一個開始,一共有十個。看見資料庫提供的功能,可以更清楚的寫頁面分頁
寫一個分頁的方法傳入第幾頁,和一頁顯示多少條,
可以根據第幾頁和每頁條數知道開始的第幾條(PageNo-1)*pageSize

public List<User> getUserListPage(int PageNo, int pageSize) {
    List<User> users =new ArrayList<User>();
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    try {
        conn = DBConnectionUtil.CreateConnection();
        String sql = "SELECT * FROM user ORDER BY userId ASC limit ?,?";
        ps = conn.prepareStatement(sql);
        ps.setInt(1,(PageNo-1)*pageSize);
        ps.setInt(2,pageSize);
        rs = ps.executeQuery();
        while (rs.next()) {
            User user = new User();
            user.setUserId(rs.getInt("userid"));
            user.setUsername(rs.getString("username"));
            user.setPassword(rs.getString("password"));
            users.add(user);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        DBConnectionUtil.closeAll(rs, ps, conn);
    }

    return users;

}

  • 後臺的分頁就實現了,可以寫個測試類呼叫分頁方法看看是否存在錯誤 無誤後,開始向頁面傳值了。
  • 寫個分頁資訊顯示的Servlet的 我們寫了個PageResult現在可以用起來了
  • 一開始載入頁面是肯定沒有傳值所有預設開始為1,每頁10條 把值都賦給PageResult
  • 注意總頁數是總條數除以每頁數,有餘數進一
@WebServlet(name = "UsersServlet",urlPatterns = {"/userPage"})
public class UsersServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int pageNo =1;
    int pageSize =10;
    String pageNoStr =request.getParameter("pageNO");
    String pageSizeStr =request.getParameter("pageSize");
    if(pageNoStr!=null){
        pageNo=Integer.valueOf(pageNoStr);

    }
    if(pageSizeStr!=null){
        pageSize=Integer.parseInt(pageSizeStr);
    }


    UserService userService =new UserServiceImpl();
    List<User> users =userService.getUserListPage(pageNo,pageSize);
    int count =userService.getUsersCount();

    PageResult pageResult =new PageResult();
    pageResult.setPageNo(pageNo);
    pageResult.setPageSize(pageSize);
    pageResult.setResults(users);
    pageResult.setCount(count);
    if (count%pageSize!=0){
        pageResult.setPageCount(count/pageSize);
    }else {
        pageResult.setPageCount(count/pageSize+1);
    }

    response.setCharacterEncoding("UTF-8");
    System.out.println(pageResult);
    request.setAttribute("pageResult",pageResult);
    try {
        request.getRequestDispatcher("/users.jsp").forward(request,response);
    } catch (ServletException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

資料都傳輸到頁面了,現在需要頁面處理資料

  • 對PageResult中。Results遍歷得到頁面資訊 Index.index 只能顯示頁面條數序號,全部資訊的序號要加上前面的總條數
    ${(pageResult.pageNo-1)*pageResult.pageSize+index.index}

    ###下面的分頁操作需要一些邏輯,和程式碼拼接 ###
    如果頁數很多會顯示不全,所有我們只取10個頁碼
    頁碼的內容是變化的
    上一頁和下一頁就比較簡單的可以實現了引數上加一,減一

  • 開始頁數int start =pageNO-5<= 0?1:pageNO-5;

  • 結束頁數 int end= start+10大於pageCount? start+10: pageCount;

<table>
    <tr>

        <td>序號</td>
        <td>username</td>
        <td>password</td>
        </tr>

    <c:forEach var="user" items="${pageResult.results}" varStatus="index">
        <tr>

            <td>${(pageResult.pageNo-1)*pageResult.pageSize+index.index}</td>
            <td>${user.username}</td>
            <td>${user.password}</td>
         </tr>
    </c:forEach>
</table>

<%
    PageResult pageResult = (PageResult) request.getAttribute("pageResult");
    int pageNO =pageResult.getPageNo();
    int pageCount =pageResult.getPageCount();

    int start =pageNO-5<= 0?1:pageNO-5;
    int end= start+10<pageCount? start+10: pageCount;

    if(pageNO >1){
        %>
        <a href="userPage?pageNO=1">首頁</a>
        <a href="userPage?pageNO=<%=pageNO-1%>">上一頁</a>

    <%
    }
    for(int i=start;i<end;i++){
        %>
    <a style="color:<%=(i==pageNO?"red":"")%>" href="userPage?pageNO=<%=i%>">第<%=i%>頁</a>
<%
    }
    if(pageNO<pageCount){
         %>
        <a href="userPage?pageNO=<%=pageNO+1%>">上一頁</a>
        <a href="userPage?pageNO=<%=pageCount%>">首頁</a>
       <%
    }
%>
<form action="userPage">
    第<input type="text"name="pageNO" value="${pageResult.pageNo}">頁
    <input type="submit" value="確定">
</form>
一共有<span>${pageResult.count}</span>

###歸根結底分頁功能的實現邏輯上很簡單,後端把分頁資訊封裝在一個物件中,把物件給前端,前端處理資訊顯示並個分頁按鈕herf賦上url+頁碼引數 點選再次請求伺服器就可以了 ###