a标签点击分页--jsp+controller

分页 -- a标签点击分页

实体类

public class Pagination {
    private int totalCount;//总条数
    private String pageSize = 10;//一页多少条
    private String page;//第几页
    private int totalPage;//总页数
    private int startPage;//开始条查
    private int endPage;//结束条
    private String curPage;//当前页

    //get set 方法
}

controller

public ModelAndView findPage(HttpServletRequest request,HttpServletResponse response){
    Pagination page = new Pagination();
    int pageSize = 10;
    String pageSize = request.getParameter("pageSize");
    page.setPageSize(pageSize);
    int curPage = 1;
        String curPage = request.getParameter("curPage");
        page.setCurPage(curPage);
    Map<String,Object> map = new HashMap<String, Object>();
    map.put("startPage", page.getStartPage());
    map.put("endPage", page.getEndPage());
    List<xxx> list = service.findPage(map);

    ModelAndView mv=new ModelAndView();
    mv.addObject("list", list);
        mv.addObject("page", page);
    mv.setViewName("xxx.jsp");
    return mv;
}

jsp 页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div style="text-align:right" id="page">
    每页<input type="text" name="pageSize" size="2" value="${page.pageSize}"/>条 
    当前页数:[${page.curPage }/${page.totalPage }] 
    <c:if test="${page.curPage>1}">
        <a href="findPage.action?curPage=1&pageSize=${page.pageSize}">首页</a>
        <a href="findPage.action?curPage=${page.curPage-1}&pageSize=${page.pageSize}">上一页</a>
    </c:if>
    <c:if test="${page.curPage<page.totalPage}">
        <a href="findPage.action?curPage=${page.curPage+1}&pageSize=${page.pageSize}">下一页</a>
        <a href="findPage.action?curPage=${page.totalPage}&pageSize=${page.pageSize}">末页</a>
    </c:if>
    转到第<input type="text" name="curPage" size="3" value="${page.curPage}"/>页
    <input type="submit" name="button" value="go"/>
</div>

js

<script type="text/javascript">
$(function(){
    $("#page a").mouseover(function(){
        $(this).addClass("mousePage");
    });
    $("#page a").mouseout(function(){
        $(this).removeClass("mousePage");
    });
});
</script>

CSS
<style type="text/css">
/* 分页 开始*/    
#page{
    color: #3C3C3C;
    font-size:15px;
    padding-bottom:2px;
}
#page a{
    border:1px solid #C4E1FF;
    /* border-width:1px 2px 3px 2px; */
    padding:5px 8px 5px 8px;
    font-size:16px;
    margin:0px;
}
.mousePage{
    background-color:#004B97;
    color:white;
}
/* 分页 结束*/

</style>

效果图


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值