Bootstrap 分页插件 ajax获取数据显示

Bootstrap 分页插件 ajax获取数据显示

标签（空格分隔）： bootstrap

---

文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。

1. 版本说明

• bootstrap 3.3.2
• bootstrap-paginator v1.0 github

2. 准备工程

建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。

3. 简单显示

在需要显示分页的位置添加ul标签：

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

在页面底部添加js代码：

<script>
    var options = {
        bootstrapMajorVersion: 3,
        alignment:'center',
        currentPage:1,
        numberOfPages:5,
        totalPages: 10,
        };
    $(document).ready(function(){
       $("#pagination").bootstrapPaginator(options);
    });
</script>

启动web服务，访问index.html页面，可以看到分页显示。

4. 后台准备数据

建立一个servlet，负责向前台输出json数据。

    PrintWriter out = response.getWriter();
        String s1 = "[{\"name\":\"lilei\"},{\"name\":\"lilei2\"}]";
        String s2 = "{\"name\":\"hanmeimei\"}";
        String s3 = "{\"name\":\"jim\"}";
        String s4 = "{\"name\":\"jim1\"}";
        String s5 = "{\"name\":\"jim2\"}";

        String page = request.getParameter("page");
        String cur = null;
        switch (page) {
        case "1":
            cur = s1;
            break;
        case "2":
            cur = s2;
            break;
        case "3":
            cur = s3;
            break;
        case "4":
            cur = s4;
            break;
        case "5":
            cur = s5;
            break;
        default:
            break;
        }
        out.print(cur);
        out.close();

5. 前台展示数据

前台需要先获取记录的总条数和每页容量。

  <ol id="content">

             </ol>

        <ul id="pagination" pageSize="2">
    <script>
    var totalPages;
    var pageSize = $("#pagination").attr("pageSize");
     $.ajax({
            url:"/BootstrapPagination/QueryStudents",
            type:"POST",
            dataType:"json",
            async:false,
            success:function(data){
            window.totalPages = Math.ceil(data /pageSize) ;
            },
            error:function(error){
            alert("error");
            }
            });
     </script>
    </ul>        

其中pageSize设置为2,先用post方法获取totalPages，用来初始化分页插件。

 <script>
    var options = {
        bootstrapMajorVersion: 3,
        alignment:'center',
        currentPage:1,
        totalPages: totalPages ,
        pageUrl: function(type, page, current){
            return "/BootstrapPagination/QueryStudents?page="+page; 
},
onPageClicked: function (event, originalEvent, type, page) {  
     originalEvent.preventDefault();
    originalEvent.stopPropagation();
   $.ajax({
        url:originalEvent.target.href,
        type:"GET",
        dataType:"json",
        success: function(data){
            $("#content li").remove();
            $(data).each(function(){
                $("#content").append("<li>"+this.name+"</li>");
            });

        },
        error: function(error){
            alert("error");
        }
   });
}
    };
    $(document).ready(function(){
        $("#pagination").bootstrapPaginator(options);
        $("#pagination li:first a").trigger("click");
    });

</script>

运行程序即可。详细的可以参见bootstrap-paginator说明,或者去bootstrap-paginator github查阅。
工程下载bootstrap-paginator.zip jdk1.8 tomcat 8