分页( SSM+jquery封装的ajax实现前后台分页的异步刷新)_ssm分页查询异步-程序员宅基地
SSM+jquery封装的ajax实现前后台分页的异步刷新
目录
1.什么是分页
2.需求
3.思路分析，变量介绍
4.逻辑操作步骤
5.具体实例，代码分析
6.总结
什么是分页？
分页，顾名思义就是将所有数据按页码分组分别显示在属于自己的当前页内，当数据很多的时候，只在一页里看比较杂乱，所以用到分页，使显示更清晰有条理。场景如下图（不是很美观，主要看功能）：
需求：
1、点击全部分类，将全部分类里的图书分页
2、点击全部分类下面的其它类型，将其他类型中显示的图书分页
3、点击1，2，3，4，5等等页码显示每页中的数据
4、点击哪个页码，哪个页码变成红色
5、点击上一页，跳到上一页展示的界面，点击下一页跳到下一页显示的界面
6、实现图书信息与页码的局部刷新
思路分析,变量介绍：
前台需要展示的是一页一页的数据，每一页包含的信息有两个：当前页码(currentPage)、每一页显示的数据的条数(pageSize)。其他的事情前台不用关心，它的目的只是展示数据。而数据的来源在后台，前台告诉后台需要哪一页的数据以及这一页有多少条数据，pageSize是可以设定的，所以currentPage是前台和后台交互的核心。那么后台接收到前台的currentPage，要去识别它，根据这个参数到数据库取得数据返回给前台。
当点击全部分类时根据前端传过来的当前页，去数据库中获取每页显示的数据，再利用count(*)获取书总行数来计算总页数，再将book，bookList，page 传递到前端，特别注意：传递book主要是用book中cid的属性，这里的book类中的cid属性为空，虽说我们没有用到，但是要给设个值book.setCid="0",因为要做为book.jsp显示图书界面的a链接中的点击事件的方法里的参数传递，为空会报错，为什么要作为参数呢？因为不论是全部分类，还是下面的三个分类，都共用一个界面book.jsp中的页码的<div>,所以当点击a链接触发点击事件，将数据传递到ajax内，ajax参数返回到控制器的ajax.do方法内，如果是下面的三个分类触发点击事件进来的，此时就需要cid的值去查询cid为1,2,3的图书信息，而如果是全部分类触发点击进来的，就不需要通过cid查图书，就默认设置cid为0作为参数，这样就不会报错了。
当点击全部分类的下面三个类型，在一张表category中，表中的cid属性与book表中的cid属性外键连接，所以当点击下面的链接时要根据传过来的cid与当前页去数据中查询图书的信息,再传递到前端界面，这里注意要将book，bookList，page 一起传递到前端，此时点击三个分类的哪个a链接，再触发点击事件，ajax都将对应的cid传回到控制层的ajax.do方法内，然后根据cid去数据库中查出对应的所有图书信息与总行数放到BookPage包装类里，通过@Response注解一起再返回return到ajax的success里进行拼接，完成异步刷新。
因为不论是全部分类触发点击事件，还是下面属于同一张表的三个分类触发的点击事件都会进入到同一个控制器的ajax.do方法内，此时就要在进入之前拼一个参数，判断一下，当这个参数为0，证明为全部分类触发，调用mapper.xml文件中查询所有书的那个方法，当这个参数为1，证明为全部分类下面的三个分类触发，调用mapper.xml文件中根据cid查询所有书那个方法。0与1在left.jsp中a链接后面作为路由参数传递到控制器。
属性介绍：
①、Page类中的属性解析：
1、先说说currentPage，currentPage的值怎么设置？当然是后台告诉前台一共有多少页(totalPage)，然后前台要展示的数据就在0~totalPage页之间，当前的处于哪一页就是currentPage的值；
2、rows(数据库中记录总数)，从数据库中查出的记录总数，通过sql指令中的count(*)查询。
3、totalPage(总页数)，计算公式为：当从数据库中的查出的记录总数(rows)为偶数时， totalPage(页数) = 数据库中该表的记录总数(rows)/pageSize(每一页记录数) ；当从数据库中的查出的记录总数(rows)为奇数时， totalPage(页数) = 数据库中该表的记录总数(rows)/pageSize(每一页记录数) +1；
4、pageSize，每一页记录数，这很好理解，每一页要展示多少数据，自己字自定义类中设定。
5、begin(每页的数据的起始下标),起始下标begin计算公式：begin = (currentPage-1)*pageSize。这个变量是为了给数据库中执行分页的sql语句limit使用，limit使用规则就是 limt begin,pageSize;
6、 id，用来判断是哪个分类触发的点击事件进入的ajax.do方法内，再对数据库进行对应操作(接收left.js传过来的定义的固定值，0与1，0为全部分类，1为下面的三个分类)
②、BookPage
智能推荐
JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地
文章浏览阅读685次。1.1.什么是有状态？有状态服务，即服务端需要记录每次会话的客户端信息，从而识别客户端身份，根据用户身份进行请求的处理，典型的设计如tomcat中的session。例如登录：用户登录后，我们把登录者的信息保存在服务端session中，并且给用户一个cookie值，记录对应的session。然后下次请求，用户携带cookie值来，我们就能识别到对应session，从而找到用户的信息。缺点是什么？服务端保存大量数据，增加服务端压力 服务端保存用户状态，无法进行水平扩展 客户端请求依赖服务.._无状态token登录
SDUT OJ逆置正整数-程序员宅基地
文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.
年终奖盲区_年终奖盲区表-程序员宅基地
文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的，速算扣除数也按照月份计算出来，但是最终减去的也是一个月的速算扣除数。为什么这么做呢，这样的收的税更多啊，年终也是一个月的收入，凭什么减去12*速算扣除数了？这个霸道（不要脸）的说法，我们只能合理避免的这些跨级的区域了，那具体是那些区域呢？可以参考下面的表格：年终奖一列标红的一对便是盲区的上下线，发放年终奖的数额一定一定要避免这个区域，不然公司多花了钱..._年终奖盲区表
matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地
文章浏览阅读7.5k次，点赞5次，收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值
Android fragment的用法_android reader fragment-程序员宅基地
文章浏览阅读4.8k次。1，什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment
FFT of waveIn audio signals-程序员宅基地
文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals
随便推点
Awesome Mac：收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地
文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具，主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》，于是建了这么一个仓库，持续更新作为补充，搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac
java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地
文章浏览阅读616次。一.jquery简介 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术
Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地
文章浏览阅读1.6w次，点赞5次，收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式：.ant-table-body{ &amp;::-webkit-scrollbar { height: 5px; } &amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner
javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地
文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!
论文开题报告怎么写？_开题报告研究难点-程序员宅基地
文章浏览阅读1.8k次，点赞2次，收藏15次。同学们，是不是又到了一年一度写开题报告的时候呀？是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦，一定让你脱胎换骨，顺利拿下开题报告这个高塔，你确定还不赶快点赞收藏学起来吗？_开题报告研究难点
原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地
文章浏览阅读6k次，点赞4次，收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue