使用Bootstrap Paginator分页插件进行分页

Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。可以让我们方便的构建分页应用。

首先，我们需要引用相应的文件，其下载地址为：https://github.com/lyonlai/bootstrap-paginator/releases

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap-paginator.js"></script>

下载的文件夹中有两个示例页面，可以作为参考

然后，在网页中添加代码

<ul>
    <li style="font-weight: bold;font-size: 16px;">
        <span>操作用户</span>
        <span>操作时间</span>
        <span>IP地址</span>
        <span>操作内容</span>
    </li>
    <c:forEach items="${logs }"  var="log"  >
        <li>
            <span>${log.LOG_SUBJECT_NAME }</span>
            <span>${log.LOG_TIME }</span>
            <span>${log.LOG_SRC_IP }</span>
            <span>${log.LOG_RESULT_DESC }</span>
        </li>
    </c:forEach>
</ul>
<!-- 下面是控制分页控件，必须要是ul元素才行 -->
<ul id='bp-element'></ul>

<script type="text/javascript">
$(function(){
    test("", function(){
        var element = $('#bp-element');
        options = {
            bootstrapMajorVersion:3, //对应的bootstrap版本
            currentPage: ${currentPage }, //当前页数，这里是用的EL表达式，获取从后台传过来的值
            numberOfPages: 5, //每页页数
            totalPages:${totalPages }, //总页数，这里是用的EL表达式，获取从后台传过来的值
            shouldShowPage:true,//是否显示该按钮
            itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                location.href = "/self?event=toUserOperaLog&page=" + page;
            }
        };
        element.bootstrapPaginator(options);
    })
});
</script>

控制器代码：

    private ModelAndView toUserOperaLog(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //初始化mv
        final ModelAndView mv = new ModelAndView(Views.VIEW_USER_OPERA_LOG);
        //获取Session中的值
        Object userObj = request.getSession().getAttribute("USER");
        //获取前台传来的当前页数
        String pageObj = request.getParameter("page");
        //初始化页码
        Integer page = 1;
        //加try catch的目的是为了在首页访问该页的时候是没有page参数的，所以会转化失败，此时就用初始化时的1来代替
        try {
            page = Integer.parseInt(pageObj);
        } catch (Exception e) {
        }
        //判断Session中该值是否为空
        if (userObj != null) {
            EntityUser user = (EntityUser) userObj;
            //查询日志总数，并计算总页数
            int count = userService.getLogCount(user.getUSER_ID(), "opera");
            int totalPages = count / PAGE_SIZE + 1;//直接+1有个弊端，就是当数据刚满一页时，会出现一个空白页
            mv.addObject("totalPages", totalPages);

            //将当前页码放入mv中年
            mv.addObject("currentPage", page);

            //查询日志数据放入mv中
            List<EntityLog> logList = logService.findOperaLogByPage(page, PAGE_SIZE, user.getUSER_ID());
            mv.addObject("logs", logList);
        } else {
            //Session为空则直接跳转到首页
            toIndex(request, response);
        }
        //返回mv
        return mv;
    }

服务层代码：

    public List<EntityLog> findOperaLogByPage(int page,int pageSize,String USER_ID){
        String hql="from EntityLog where USER_ID=? and LOG_TYPE=2 order by LOG_TIME DESC";
        List<String> param=new ArrayList<>();
        param.add(USER_ID);
        return dao.findByPage(page, pageSize, hql, param);
    }

dao层代码：

    @Override
    public List findByPage(final int page, final int pageSize, final String hql, final List<String> param) {
        return    this.getHibernateTemplate().execute(new HibernateCallback<List>() {
            @Override
            public List doInHibernate(Session session) throws HibernateException {
                Query query = session.createQuery(hql);
                if (param != null) {
                    for (int i = 0; i < param.size(); i++) {
                        query.setParameter(i, param.get(i));
                    }
                }
                query.setFirstResult((page-1)*pageSize);
                query.setMaxResults(pageSize);
                return query.list();
            }
        });
    }

关于javascript中各参数设置可参考网页：http://www.cnblogs.com/moretry/p/4441728.html

思考：
分页有前端分页和后端分页两种方法。
前端分页就是将所有数据查询到前台，然后用js控制每次显示的数据；后端分页就是每次将所需的页码发到后端，然后后端查询数据库，再将该页数据返回到前端显示。一般采用后者，即后端分页。

使用Bootstrap Paginator分页插件进行分页

猜你喜欢