JSP Servlet Phân trang sản phẩm hiển thị có Next Previous với JDBC connect Database

Dùng Database theo JDBC
http://localhost:8080/Shop_Bonfire/index.jsp?pages=3

Bài 1:Hiển thị sản phẩm > index.jsp

Java 2016

<%
    int first = 0, last = 0, pages = 1;
     
    if (request.getParameter("pages") != null) {
        pages = (int) Integer.parseInt(request.getParameter("pages"));
    }
    //Lấy tổng sản phẩm trong data bằng query select count(id) from name_table với JDBC Connect
    int total = new ShopDAO().getCount();
    
    if (total <= 4) {
        first = 0; 
        last = total; 
    } else {
        first = (pages - 1) * 4;
        last = 4;
    }
    //Lấy ra danh sách sản phẩm
    List<Shop> list = new ShopDAO().getShop(first, last);
    for (Shop item : list) {
%>

//Ở đây là chỗ cần lặp sản phẩm cần hiển thị
//Ở bài này sẽ hiển thi 4 sản phẩm trên 1 trang
//Nếu nhiều sản phẩm thì sẽ phân trang sang trang 2 3 ...
//Ví dụ: hiển thị tên sản phẩm <span><%=item.getName() %> </span>

<%}%>

http://localhost:8080/Shop_Bonfire/index.jsp?pages=2

Phần nút phân trang > index.jsp

Java 2016

<ul class="start">    
    <%                //Button Previous
        int back = 0;
        if (pages == 0 || pages == 1) {
            back = 1;//Luon la page 1
        } else {
            back = pages - 1;//Neu pages tu 2 tro len thi back tru 1
        }
    %>
    <li ><a href="index.jsp?pages=<%=back%>"><i></i></a></li>
                <%
                    //Button Number pages
                    int loop = 0, num = 0;
                    if ((total / 4) % 2 == 0) {
                        num = total / 4;
                    } else {
                        num = (total + 1) / 4;
                    }
                    //Nếu total lẻ thêm 1
                    if (total % 2 != 0) {
                        loop = (total / 4) + 1;

                    } else {
                        //Nếu total chẵn nhỏ hơn fullpage và # fullPage thì thêm 1
                        if (total < (num * 4) + 4 && total != num * 4) {
                            loop = (total / 4) + 1;
                        } else {
                            //Nếu bằng fullPage thì không thêm
                            loop = (total / 4);
                        }
                    }
                    //Lap so pages
                    for (int i = 1; i <= loop; i++) {%>
                <% if (pages == i) {%> 

    <li><span><a href="index.jsp?pages=<%=i%>"><%=i%></a></span></li>
                <%} else {%>
    <li class="arrow"><a href="index.jsp?pages=<%=i%>"><%=i%></a> </li>

        <%}
             }%>
        <%
            //Button Next
            int next = 0;
            //Nếu total lẻ
            if (total % 2 != 0) {
                if (pages == (total / 4) + 1) {
                    next = pages;//Khong next
                } else {
                    next = pages + 1;//Co next
                }
            } else {
                //Nếu total chẵn nhỏ hơn fullpage
                //Và không fullPage thì thêm 1
                if (total < (num * 4) + 4 && total != num * 4) {
                    if (pages == (total / 4) + 1) {
                        next = pages;//Khong next
                    } else {
                        next = pages + 1;//Co next
                    }
                } else {
                    //Nếu fullPage đến trang cuối dừng
                    //Chưa tới trang cuối thì được next
                    if (pages == (total / 4)) {
                        next = pages;//Khong next
                    } else {
                        next = pages + 1;//Co next
                    }
                }
            }
        %>
    <li ><a href="index.jsp?pages=<%=next%>"><i class="next"></i></a></li>
</ul>
</div>

ShopDAO.java

Java 2016

//Pages number 1->4 or 5->8 ..
public ArrayList<Shop> getShop(int a, int b) {
    Connection conn = DBUtil.getConnection();
    ArrayList<Shop> list = new ArrayList();
    String sql = "SELECT * FROM product.shop Limit ?,?";
    try {
        PreparedStatement stmt = conn.prepareStatement(sql);
        stmt.setInt(1, a);
        stmt.setInt(2, b);
        ResultSet rs = stmt.executeQuery();
        while (rs.next()) {
            String id = rs.getString("id");
            String name = rs.getString("name");
            String image = rs.getString("image");
            float price = rs.getFloat("price");
            Shop s = new Shop(id, name, image, price);
            list.add(s);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return list;
}
//Test show
//    public static void main(String[] args) {
//        ShopDAO s = new ShopDAO();
//        System.out.println(s.getShop());
//    }


//Total product number
public int getCount() {
    Connection conn = DBUtil.getConnection();
    ArrayList<Shop> list = new ArrayList();
    String sql = "SELECT count(id) FROM product.shop";
    int count = 0;
    try {
        PreparedStatement stmt = conn.prepareStatement(sql);
        ResultSet rs = stmt.executeQuery();
        while (rs.next()) {
            count = rs.getInt(1);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return count;
}
//Test count product
//    public static void main(String[] args) {
//        ShopDAO s = new ShopDAO();
//        System.out.println(s.getCount());
//    }

Phân trang bằng (JQuery + Javascript)
/** jQuery Pagination plugin **/

Phân trang bằng (JQuery + Javascript)

Java 2017

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery Pagination plugin</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
        <!-- JS tạo nút bấm di chuyển trang start -->
        <script src="http://1892.yn.lt/blogger/JQuery/Pagging/js/jquery.twbsPagination.js" type="text/javascript"></script>
        <!-- JS tạo nút bấm di chuyển trang end -->
        <script type="text/javascript">
            $(function () {
                var pageSize = 6; // Hiển thị 6 sản phẩm trên 1 trang
                showPage = function (page) {
                    $(".contentPage").hide();
                    $(".contentPage").each(function (n) {
                        if (n >= pageSize * (page - 1) && n < pageSize * page)
                            $(this).show();
                    });
                }
                showPage(1);
                ///** Cần truyền giá trị vào đây **///
                var totalRows = 40; // Tổng số sản phẩm hiển thị
                var btnPage = 5; // Số nút bấm hiển thị di chuyển trang
                var iTotalPages = Math.ceil(totalRows / pageSize);

                var obj = $('#pagination').twbsPagination({
                    totalPages: iTotalPages,
                    visiblePages: btnPage,
                    onPageClick: function (event, page) {
                        console.info(page);
                        showPage(page);
                    }
                });
                console.info(obj.data());
            });
        </script>
        <style>
            ///** CSS căn id pagination ra giữa màn hình **///
            #pagination {
                display: flex;
                display: -webkit-flex; /* Safari 8 */
                flex-wrap: wrap;
                -webkit-flex-wrap: wrap; /* Safari 8 */
                justify-content: center;
                -webkit-justify-content: center;
            }
        </style>
    </head>
    <body style="width: 500px; margin:auto;">
        <!-- Hiên thị nút bấm -->
        <ul id="pagination"></ul>

        <!-- Hiển thị sản phẩm -->
        <div class="contentPage">1 I have some content</div>
        <div class="contentPage">2 I have some content</div>
        <div class="contentPage">3 I have some content</div>
        <div class="contentPage">4 I have some content</div>
        <div class="contentPage">5 I have some content</div>
        <div class="contentPage">6 I have some content</div>
        <div class="contentPage">7 I have some content</div>
        <div class="contentPage">8 I have some content</div>
        <div class="contentPage">9 I have some content</div>
        <div class="contentPage">10 I have some content</div>
        <div class="contentPage">11 I have some content</div>
        <div class="contentPage">12 I have some content</div>
        <div class="contentPage">13 I have some content</div>
        <div class="contentPage">14 I have some content</div>
        <div class="contentPage">15 I have some content</div>
        <div class="contentPage">16 I have some content</div>
        <div class="contentPage">17 I have some content</div>
        <div class="contentPage">18 I have some content</div>
        <div class="contentPage">19 I have some content</div>
        <div class="contentPage">20 I have some content</div>
        <div class="contentPage">21 I have some content</div>
        <div class="contentPage">22 I have some content</div>
        <div class="contentPage">23 I have some content</div>
        <div class="contentPage">24 I have some content</div>
        <div class="contentPage">25 I have some content</div>
        <div class="contentPage">26 I have some content</div>
        <div class="contentPage">27 I have some content</div>
        <div class="contentPage">28 I have some content</div>
        <div class="contentPage">29 I have some content</div>
        <div class="contentPage">30 I have some content</div>
        <div class="contentPage">31 I have some content</div>
        <div class="contentPage">32 I have some content</div>
        <div class="contentPage">33 I have some content</div>
        <div class="contentPage">34 I have some content</div>
        <div class="contentPage">35 I have some content</div>
        <div class="contentPage">36 I have some content</div>
        <div class="contentPage">37 I have some content</div>
        <div class="contentPage">38 I have some content</div>
        <div class="contentPage">39 I have some content</div>
        <div class="contentPage">40 I have some content</div>

    </body>
</html>

Download (pagging-JQuery.zip)