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控制 每次显示的数据;后端分页就是每次将所需的页码发到后端,然后后端查询数据库,再将该页数据返回到前端显示。一般采用后者,即后端分页。