We know that the data displayed in the front desk usually conveys information encapsulated by some list s, but in the face of a large number of data, it is impossible to display on one page.

We need to paginate. In order to form a good interface, data and pages need to be processed and interacted in front of and behind the scenes.

Starting with the background code, the data transmitted to the front end is not only a collection, but also some data parameters of paging. So here we choose to encapsulate a PageBean, which usually only needs 5 pieces of data, indicating the situation, and then adding it. See below for details.

       //Current page
    private int currentPage;
    //Number of items displayed on the current page
    private int currentCount;
    //Total number
    private int totalCount;
    //PageCount
    private int totalPage;
    //Data displayed on each page
    private List<T> list=new ArrayList<T>();

CurrtPage's current page represents the page number that the page stays on, the number of bars displayed on the current Count's current page, the total Count's total number, and the total Page's total number of pages (which can be calculated) list represents the page's data after paging, which is defined as generic reusable.

String cpg = request.getParameter("currentPage");
        if(cpg==null) cpg="1";
        
        int currentPage=Integer.parseInt(cpg);
        int currentCount=10;
        PageBean<Person> pageBean= ps.findPageBean(currentPage,currentCount);
        
        request.setAttribute("pagebean", pageBean);

Because the first page accessed by default is the first page, so make a judgment assignment of 1, where the data displayed on each page is written as 10, which can be set by itself, and then the paging data is queried from the database by dao and encapsulated in the service layer. Then save it to the domain object to forward or redirect.

Here's how to encapsulate this data into objects

PageBean pageBean = new PageBean();
        PersonDao pd = new PersonDaoImpl();
        // 1.Current page
        pageBean.setCurrentPage(currentPage);
        // 2.Number of current pages
        pageBean.setCurrentCount(currentCount);
        // 3.Total number
        int totalCount = pd.getTotalCount();
        pageBean.setTotalCount(totalCount);
        // 4.PageCount
        int totalPage = (int) Math.ceil(1.0 * totalCount / currentCount);
        pageBean.setTotalPage(totalPage);
        // 5.Data per page
        int index = (currentPage - 1) * currentCount;
        List<Person> list = pd.findPersonListForPageBean(index, currentCount);
        pageBean.setList(list);

The total number of entries and the list paginated data need to be queried by the database. Others can be directly assigned or calculated.

Attach dao data

@Override
    public int getTotalCount() {
        // TODO Auto-generated method stub
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select count(*) from user";
        long query = 0;
        try {
            query = (long) runner.query(sql, new ScalarHandler());
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return (int) query;
    }

It should be noted that the total number of queries is long by default and needs to be changed to int by itself.

@Override
    public List<Person> findPersonListForPageBean(int index, int currentCount) {
        // TODO Auto-generated method stub
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select *from user limit ?,?";
        List<Person> query = null;
        try {
            query = runner.query(sql, new BeanListHandler<Person>(Person.class), index, currentCount);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return query;
    }

This is the normal paging operation.

So far, some of the background preparation of paging has been fully prepared, and the data is sent to the front desk, that is, to the front desk for the remaining processing.

Front desk correlation

<div class="col-md-12">
        <div class="text-center">
            <ul class="pagination">
            <c:if test="${pagebean.currentPage==1 }">
            <li class="disabled"><a href="javascript:void(0);">&laquo;</a></li>
            </c:if>
            <c:if test="${pagebean.currentPage!=1 }">
            <li><a href="${pageContext.request.contextPath}/personlist?currentPage=${pagebean.currentPage-1}">&laquo;</a></li>
            </c:if>
            
            
            <c:forEach begin="1" end="${pagebean.totalPage }" var="page">
            <c:if test="${pagebean.currentPage==page }">
            <li class="active"><a href="javascript:void(0);">${page }</a></li>            
            </c:if>
            <c:if test="${pagebean.currentPage!=page }">
            <li><a href="${pageContext.request.contextPath}/personlist?currentPage=${page}">${page }</a></li>            
            </c:if>
            </c:forEach>
            
            
            <c:if test="${pagebean.currentPage==pagebean.totalPage }">
            <li class="disabled"><a href="javascript:void(0);">&raquo;</a></li>
            </c:if>
            <c:if test="${pagebean.currentPage!=pagebean.totalPage }">
            <li><a href="${pageContext.request.contextPath}/personlist?currentPage=${pagebean.currentPage+1}">&raquo;</a></li>
            </c:if>
            </ul>
        </div>
    </div>

Here are some pages in the front desk, using the bootstrap template style

Some of the logic of the front desk needs to be noted: you can't click on the previous page on the first page, and you can't access the next page on the last page. Clicking on the current page can not make a jump. When you are on the current page, you need a dark color to distinguish the other pages.

These functions can be realized by combining some if and foreach statements of jstl.

javascript:void(0) means that you cannot click without jumping.

Other logic can be studied by itself.