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

前端分页框架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样式，我们就可以看到翻页效果了，如下：