简单分页，无需插件实现上一页|下一页分页功能

分页功能五花八门,插件的使用也很方便。最近做项目,分页功能是写好的了，利用bootstarp 简单实现的, 类似于这种

但由于数据越来越多,这种循环的方式很不好看。于是想到上一页| 下一页分页的样式,看到网上使用插件,但是表单都是拼的,由于和自己代码出入过大，又懒得改代码。自己就重写写了一个，简单得实现该功能，效果如下：

当在第一页时候,显示下一页, 上一页掩藏 , 网上弄成不可选中,效果都差不多

当在最后一页得时候 ,下一页掩藏上一页显示

源码如下：


//实体类 get set 省略
public class Page <T> implements Serializable{
    private int totalPage; //总页数
    private int currentPage; //当前页数
    private int currentCount;//每页的条数
    private int totalCount;//总的数目
    public static final int CURRENT_COUNT = 10;
  
}

//Controller

 @RequestMapping("/user/loginLog")
    //统计登录日志
    public ModelAndView loginLog(Model model, Page page) {
        try {
            int currentPage = page.getCurrentPage(); //当前页数
            if (currentPage == 0) {
                currentPage = 1;
            }
            String email = TokenManager.getEmail();
            System.out.println("/user/loginLog:" + email);
            List<LoginLog> loginLogList = loginlogService.getloginLog(email);
            int totalCount = loginLogList.size();//总个数
            int currentcount = Page.CURRENTCOUNT;// 每页显示的个数
            int totalPage = (int) Math.ceil(1.0 * totalCount / currentcount);//总的页数
            int index = (currentPage - 1) * currentcount; //limit起始位置
            List<LoginLog> logs = loginlogService.logLimit(email, index, currentcount);
            page.setTotalPage(totalPage);
            model.addAttribute("log", logs);
            model.addAttribute("page", page);
           //start 就是当前页数
            model.addAttribute("start",currentPage);
        } catch (Exception e) {
            System.out.println("/user/loginLog 发生异常:" + e.getMessage());
        }
        return new ModelAndView("include/log/loginLog");
    }

分页JSP
利用后台传入的Start 进行加一或减一然后再传入后台, 如此反复

这边主要就是判断逻辑




<div class="container pull-right">

    <ul class="pager ">
        <li><a href="?currentPage=<%=1%>">首页</a></li>
        <c:choose>

            <c:when test="${start>'1' && start <= page.totalPage }">

                <li><a href="?currentPage=${start-'1'}">上一页</a></li>

            </c:when>

        </c:choose>
        <c:if test="${start>='1'&& start<page.totalPage}">

            <li><a href="?currentPage=${start+'1'}">下一页</a></li>
        </c:if>

        <li><a href="?currentPage=${page.totalPage}">尾页</a></li>
        <li>共${page.totalPage}页</li>
    </ul>
</div>

这样就可以了, 这样不好一点就是每次都要刷新页面, 用户体验不好, 利用ajax 可能会更好一点。方法千百种,适合自己的就好！

简单分页，无需插件 实现 上一页|下一页 分页功能

猜你喜欢

简单分页，无需插件实现上一页|下一页分页功能