bootStrap中pagination样式在jsp实现分页

 

1.在bootstap官网上查找分页模板

2.放到jsp中添加需要跳转的接口

<div>
    <nav aria-label="Page navigation">
        <ul class="pagination">
 //当前页面的页码,如果是第一页上一页的不可点击
            <c:if test="${pb.currentPage==1}">
            <li class="disabled">
                </c:if>
                <c:if test="${pb.currentPage!=1}">
            <li>
                </c:if>
                <span aria-hidden="true" aria-label="Previous"><a href="${pageContext.request.contextPath}/findUserByPageServlet?${pb.currentPage-1}&rows=10">&laquo;</a></span>
            </li>
 //遍历显示需要展示的数据
            <c:forEach begin="1" end="${pb.totalPage}" var="i">
                <c:if test="${pb.currentPage==i}">
                    <li class="active">
                        <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=10">${i}</a>
                    </li>
                </c:if>

                <c:if test="${pb.currentPage!=i}">
                    <li >
                        <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=10">${i}</a>
                    </li>
                </c:if>

            </c:forEach>
//如果页号已经导最后一页,点击下一页跳到第一页
                     <li>
                        <span aria-hidden="true" >
                            <c:if test="${pb.currentPage+1>pb.totalPage}">
                            <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=1&rows=10">&raquo;
                            </a>
                            </c:if>
                             <c:if test="${pb.currentPage+1<pb.totalPage}">
                            <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=10">&raquo;
                            </a>
                             </c:if>

                        </span>
                    </li>
        </ul>
    </nav>

3.写接口返回数据到前端

@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");

        //1.获取参数
        String currentPage = request.getParameter("currentPage");//当前页码
        String rows = request.getParameter("rows");//每页显示条数
        //参数为空的时候默认为第一页,显示10条数据
  
        if(currentPage == null || "".equals(currentPage)){

            currentPage = "1";
        }


        if(rows == null || "".equals(rows)){
            rows = "10";
        }
        
        //获取条件查询参数
        Map<String, String[]> condition = request.getParameterMap();


        //2.调用service查询
        UserService service = new UserServiceImpl();
        PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);

        System.out.println(pb);

        //3.将PageBean存入request
        request.setAttribute("pb",pb);
        request.setAttribute("condition",condition);//将查询条件存入request
        //4.转发到list.jsp
        request.getRequestDispatcher("/mylist.jsp").forward(request,response);
    }

4.数据库查询方法

格式:select * from table where condition limit #{当前页码},#{每页显示的条数}

最后的效果

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值