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