如何使用前端分页框架bootstrap paginator

标签：位置   ges   str   type   指定   nbsp   alt   应用   代码   

前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能。
在实现交互良好的页面翻页功能时，往往还需要配合使用后端分页框架pagehelper。pagehelper框架于前端而言，主要作用是将分页数据pageInfo从后端传入到前端。
接下来给一个应用小栗子：
step1 我们需要在jsp页面所需要显示翻页选项的位置插入一个<ul>标签，并指定id，如下：

<ul id="pagination"></ul>

step2 下载并引用bootstrap-paginator.js文件,并在jsp页面引入代码如下：

<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>

step3 在<script>标签中调用bootstrapPaginator初始化页面，示例代码如下：

<script>
$(function(){
// 使用bootstrap paginator初始化页面
$(‘#pagination‘).bootstrapPaginator({
bootstrapMajorVersion:3,
//pageInfo.pageNum是当前页面的页码
currentPage:${pageInfo.pageNum},
//pageInfo.pages是总页数
totalPages:${pageInfo.pages},
//配置页面跳转函数，向后端传入数据，发送跳转请求,
//type：选择的页码所显示的文字，如第一页默认type为first
//page:选择的页码
//current：当前页码
pageUrl:function(type,page,current)
{
return ‘${pageContext.request.contextPath}/front/product/search?pageNum=‘+page;
},

itemTexts:function(type,page, current)
{//文字翻译
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "尾页";
case "page":
return page;
}
}
});
});
</script>

这样以后，配合使用相关css样式，我们就可以看到翻页效果了，如下：

如何使用前端分页框架bootstrap paginator

标签：位置   ges   str   type   指定   nbsp   alt   应用   代码   

原文地址：https://www.cnblogs.com/JurasVon/p/11693274.html