前后端分页插件-pagehelper与simplePagination使用流程

分页插件使用流程

后端分页插件使用

• 导入PageHelper分页插件的jar包
  • jsqlparser-3.1.jar
  • pagehelper-5.1.10.jar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WIjmvn8G-1593508105152)(F:\MarkDownOnte\学习笔记\项目问题\assets\1593236028663.png)]

分页插件把查询信息封装到page中实在threadLocal中完成

PageInfo中封装的是分页的一些参数，比如上一页下一页末页最后一页等一些信息

PageInfo：分页相关参数功能类。

• getTotal()：获取总条数
• getPages()：获取总页数
• getPageNum()：获取当前页
• getPageSize()：获取每页显示条数
• getPrePage()：获取上一页
• getNextPage()：获取下一页
• isIsFirstPage()：获取是否是第一页
• isIsLastPage()：获取是否是最后一页

后端返回给浏览器的json数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVBbbYdQ-1593508105157)(F:\MarkDownOnte\学习笔记\项目问题\assets\1593245780620.png)]

前端分页插件使用

• 导入分页插件的js文件与css文件

  • jquery.simplePagination.js
  • jquery-3.3.1.min.js
  • simplePagination.css

• 设置分页按钮的父元素的div

• <div class="content">
      <div class="pagination-holder clearfix">
          <div id="light-pagination" class="pagination"></div>
      </div>
  </div>
  

  给分页插件属性赋值

  $("#light-pagination").pagination({
                      pages:pageInfo.pages,// 设置总页数
                      currentPage:pageInfo.pageNum // 设置当前页
                  });
  

• 给插件的按钮绑定点击事件

   //5.为分页按钮绑定单击事件,完成上一页下一页查询功能
  $("#light-pagination .page-link").click(function () {
      //获取点击按钮的文本内容
      let page = $(this).html();
      //如果点击的是Prev，调用查询方法，查询当前页的上一页数据
      if(page == "Prev") {
          queryByPage(pageInfo.prePage,pageSize);
      }else if (page == "Next") {
          //如果点击的是Next，调用查询方法，查询当前页的下一页数据
          queryByPage(pageInfo.nextPage,pageSize);
      } else {
          //调用查询方法，查询当前页的数据
          queryByPage(page,pageSize);
      }
  });
  

前端实现瀑布式分页

• 原理：

  • 当鼠标向下滚动的像素距离加上当前窗口的像素距离大于文档的像素距离就触发加载事件
  • 使用jquery获取当前窗口的高度：windowHigh= $(window).height()
  • 获取滚动条的滚动距离：scrollTop=$(window).scrollTop()
  • 获取文档的高度：documentHeight= $(document).height()
  • 触发加载新的信息条件：
    • windowHigh+scrollTop>=documentHeight

• 前端代码实现：

  <scripte>
      // 定义发起请求的标记
      let mark=true;
      // 定义当前页码与每页显示条数
      let currentPage=1;
      let pageSize=10;
      // 设置提前加载的距离
      let before=20;
      // 设置页面加载完毕以后触发事件
      $(function(){
      // 当前窗口滚动的时候触发事件
      $(window).scroll（function(){
      // 获取信息用于计算当前窗口是否浏览完毕
      //浏览完毕公式：当前窗口高度+鼠标滚动距离+提前加载距离>=文档高度
      // 获取当前窗口高度
      let windowHigh=$(window).heigte();
      //获取当前文档高度
      let documentHeight=$(document).height();
      // 获取鼠标滚动距离
      let scrollTop=$(window).scrollTop();
      // 满足条件触发加载事件
      if(windowHigh+scrollTop+before>=documentHeight){
      // 满足条件异步请求数据
      // 当请求标记为true的时候加载
      if(mark){$.ajax({
      // 访问路径
      url:"servlet",
      // 发送给服务器的数据
      data:{"size":pageSize,"currentPage":currentPage}，
      // 请求方式
      type:"POST"，
      // 响应数据格式
      dataType:"json",
      //成功响应回调函数
      success:function(data){
      	// 如果返回数据为空到底了
      if(data==null){
      $(".loading").hide();
                      $("#no").html("我也是有底线的...");
                      return;
      }else{
      // 把数据添加到页面中
      let titels="";
      for(let i=0;i<data.length;i++){
           titles += "<li>\n" +
                          "                <div class=\"title-box\">\n" +
                          "                    <a href=\"#\" class=\"link\">\n" +
                                                      data[i].title +
                          "                        <hr>\n" +
                          "                    </a>\n" +
                          "                </div>\n" +
                          "            </li>";                           
      }
                                      
      }
      			//显示到页面
                  $(".news_list").append(titles);
                  //将请求标记设置为true
                  send = true;
                                      
                  // 当前页面加1
                    currentPage++；                  
                                  
      }
      })}
      }
      }）
      })
  </scripte>
  

面加1
currentPage++；

  }
  })}
  }
  }）
  })

~~~