<div id="log-list"></div>
<div id="page-list"></div>

function paging(curr){
  $.getJSON('/page', {
  page: curr || 1 //向服务端传的参数
  }, function(res){
   //此处输出内容
   var table = $("<table></table>");
   table.attr({class:"layui-table admin-table",id:"page"});

   var thead = $("<thead><tr><th>编号</th><th>姓名</th><th>行为</th><th>时间</th><th>操作</th></tr></thead>");
   table.append(thead);
   var tbody = $("<tbody></tbody>");
   tbody.attr({id:"content"});

   $(function(){
    var datas = res;
     $.each(datas,function(index,value){
     var tr = $("<tr></tr>");
     tr.append("<td>"+ (++index) + "</td>");
      tbody.append(tr);
      tr.append("<td>"+ value.staffName + "</td>");
      tbody.append(tr);
      tr.append("<td>"+ value.operation + "</td>");
      tbody.append(tr);
      tr.append("<td>"+ value.createTime + "</td>");
      tbody.append(tr);
      var td = $("<td></td>");
      var div = $("<div></div>");
      div.attr({class:"layui-btn-group"});
      var button1 = $("<button detailId=" + value.weeklyId +">详情</button>");
      button1.attr({class:"layui-btn detail"});
      var button2 = $("<button recoveryId=" + value.weeklyId +">恢复</button>");
      button2.attr({class:"layui-btn recovery"});
      div.append(button1);div.append(button2);
      td.append(div);
      tr.append(td);
      tbody.append(tr);
     }); 
    });
   table.append(tbody);
   $("#log-list").append(table);
  // $("#log-list").innerHTML = table;

  //显示分页
  laypage({
   cont: 'page-list', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
   pages: res[0].pageTotal, //通过后台拿到的总页数
   curr: curr || 1, //当前页
   skip: true,
   jump: function(obj, first){ //触发分页后的回调
   if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
    $("#log-list").text('');
    paging(obj.curr);
   }
   }
  });
  });
 };
 //运行
 paging();

/**
  * 功能描述：返回无查询条件查询分页数据
  * @param page
  * @return
  * @since 
  */
 @RequestMapping(value="/page")
 @ResponseBody
 public List<SubmitLog> getPage(Integer page){
  if(page == null){
   page = 1;
  }
  List<SubmitLog> submitLogList = new ArrayList<>();
  submitLogList = logService.getAllLog(page);
  return submitLogList;
 }

/**
  * 功能描述 :无查询条件分页
  * @param pageCurr
  * @return
  * @since 
  */
 public List<SubmitLog> getAllLog(int pageCurr){
  int pageSize = 10;//每页显示十条数据
  int pageStart = (pageCurr - 1) * pageSize;// limit=(pageCurr -1)*10,10

  List<SubmitLog> submitLogList = new ArrayList<>();
  submitLogList = logMapper.getAllLog(pageSize, pageStart);
  //计算前端页面显示的页数
//  当前数据库记录数
  int count = submitLogList.get(0).getPageTotal();
  int page = count%pageSize == 0 "页数"+page);
  submitLogList.get(0).setPageTotal(page);
  return submitLogList;
 }

/**
  * 功能描述：查询所有数据--带分页
  * @param pageSize 每页大小
  * @param pageCurr 即将显示当前页
  * @return
  * @since 
  */
 @Select("SELECT s.pageTotal,number_id,staff_name,create_time,weekly_id,operation FROM submit_log,"
   + "(SELECT count(1) AS pageTotal FROM submit_log) s ORDER BY number_id DESC LIMIT #{pageStart},#{pageSize}")
 @Results({
  @Result(column="number_id",property="numberId"),
  @Result(column="staff_name",property="staffName"),
  @Result(column="create_time",property="createTime"),
  @Result(column="weekly_id",property="weeklyId")
 })
 List<SubmitLog> getAllLog(@Param("pageSize") int pageSize,@Param("pageStart") int pageStart );

//此处是显示数据的具体HTML代码
<div id="page-list"></div> //分页显示的位置

function paging(){
   $.getJSON('/weekly-page-count',{},function(res){
    //整页刷新
    laypage({
     cont: 'page-list',
     pages: res, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
     curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
     var page = location.search.match(/page=(\d+)/);
     return page "htmlcode">

/**
  * 功能描述：返回无查询条件查询分页数--用户
  * @param page
  * @return
  * @since 
  */
 @RequestMapping(value="/weekly-page-count")
 @ResponseBody
 public Integer getPage1(Integer userId){
  Integer count = weeklyService.getPageCount(userId);
  return count;
 }


4.后端代码–service部分：


/**
  * 功能描述：总页数
  * @param userId
  * @return
  * @since 
  */
 public Integer getPageCount(Integer userId){
  int count = 0;
  count = weeklyMapper.getPageCount(userId);

  int pageSize = 5; //每页显示条数
  int page = count%pageSize == 0 "htmlcode">

/**
  * 功能描述：无条件查询记录条数==分页总数
  * @param userId
  * @return
  * @since 
  */
 @Select("SELECT count(1) AS pageTotal FROM weekly WHERE user_id = #{userId}")
 Integer getPageCount(@Param("userId") Integer userId);


总结：两种分页方式使用起来都是比较方便的。使用的场景还是有些不同：异步式适合JQuery重写页面比较容易的；整页式更简单，各种场景都可以使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。