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

3 篇文章 0 订阅

分页功能 五花八门,插件的使用也很方便。最近做项目,分页功能是写好的了,利用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 可能会更好一点。方法千百种,适合自己的就好!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值