14 September 2016

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)

2 nhận xét:

  1. mình đã làm theo, có chia thành nhiều page nhưng mà là page nào cũng hiện tất cả sản phẩm

    ReplyDelete
    Replies
    1. Oh vậy à. do bài viết lâu quá rồi nên giờ check lại mình cũng ko tiện. nhưng nếu cách call api ko được thì bạn làm cách (JQuery + Javascript) trên client chắc chắn được nếu như làm demo project nhỏ

      Delete

 

BACK TO TOP

Xuống cuối trang