热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

laypage+SpringMVC实现后端分页

这篇文章主要为大家详细介绍了laypage+SpringMVC实现后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

项目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一个坑一个坑踩过来的。之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法,着实有点可惜。所以从现在开始咯。

laypage分页

下面就以laypage的两种分页展开行文的思路:异步刷新分页和整页刷新式跳转。具体可参看官方文档。

异步刷新分页

首先使用laypage之前,先加载laypage模块。使用 layui.use(‘laypage')加载即可。

1.前端html代码如下:

2.JS代码如下:

这部分使用了laypage分页函数和jQuery的append函数,实现异步刷新。

function paging(curr){
  $.getJSON('/page', {
  page: curr || 1 //向服务端传的参数
  }, function(res){
   //此处输出内容
   var table = $("
"); table.attr({class:"layui-table admin-table",id:"page"}); var thead = $("编号姓名行为时间操作"); table.append(thead); var tbody = $(""); tbody.attr({id:"content"}); $(function(){ var datas = res; $.each(datas,function(index,value){ var tr = $(""); tr.append(""+ (++index) + ""); tbody.append(tr); tr.append(""+ value.staffName + ""); tbody.append(tr); tr.append(""+ value.operation + ""); tbody.append(tr); tr.append(""+ value.createTime + ""); tbody.append(tr); var td = $(""); var div = $("
"); div.attr({class:"layui-btn-group"}); var button1 = $(""); button1.attr({class:"layui-btn detail"}); var button2 = $(""); 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对象。【如该容器为】:
pages: res[0].pageTotal, //通过后台拿到的总页数 curr: curr || 1, //当前页 skip: true, jump: function(obj, first){ //触发分页后的回调 if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr $("#log-list").text(''); paging(obj.curr); } } }); }); }; //运行 paging();

实现以上代码,基本上的样式已经出来。下面执行实现后端分页和数据查询即可。/p>

3.后端代码–controller部分:

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

4.后端代码–service部分:

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

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

5.后端代码–dao部分:

/**
  * 功能描述:查询所有数据--带分页
  * @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 getAllLog(@Param("pageSize") int pageSize,@Param("pageStart") int pageStart );

至此,异步分页前后端结合基本结束,因为代码都带有必要的注释,所以也无需过多解释。

整页刷新式跳转

这种方式的分页,基本上分页逻辑都由laypage去实现了,后端分页逻辑基本上不用过多考虑。还是比较方便的,建议结合官网的文档和代码进行理解。下面是实现代码:

1.前端HTML代码:

//此处是显示数据的具体HTML代码
//分页显示的位置

2.Js代码:

这部分的分页实现,后端只需返回总页数即可。

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 &#63; page[1] : 1;
     }(), 
     skip: true,
     jump: function(e, first){ //触发分页后的回调
     if(!first){ //一定要加此判断,否则初始时会无限刷新
      location.href = '&#63;page='+e.curr;
     }
     }
    });
   });
  }
  paging();

3.后端代码–controller部分:

/**
  * 功能描述:返回无查询条件查询分页数--用户
  * @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 &#63; count/pageSize : count/pageSize + 1; //计算页数
  return page;
 }

5.后端代码–dao部分:

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

总结:两种分页方式使用起来都是比较方便的。使用的场景还是有些不同:异步式适合JQuery重写页面比较容易的;整页式更简单,各种场景都可以使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
  • jQuery HooRay:一款自创的实用 jQuery 工具插件
    这款插件主要由作者在工作中积累的常用功能开发而成,旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件,确保其稳定性和高效性。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文探讨了如何利用jQuery在客户端实现页面跳转,并详细介绍了如何确保页面在浏览器的顶层窗口中打开,而不是局限于当前框架内。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文提供了多种方法来计算给定年份和月份的起始日和结束日,并进一步探讨了如何根据年、月、周获取特定周的起始日和结束日。 ... [详细]
author-avatar
淘宝休丶闲女-装店
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有