分页( SSM+jquery封装的ajax实现前后台分页的异步刷新)_ssm分页查询异步-程序员宅基地

技术标签: 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、先说说currentPagecurrentPage的值怎么设置?当然是后台告诉前台一共有多少页(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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43648683/article/details/84333637

智能推荐

springboot整合Nacos多环境以及项目配置文件动态读取的多种配置方式_nacos spring.datasource.platform-程序员宅基地

文章浏览阅读2w次,点赞8次,收藏50次。Nacos介绍参考链接Nacos官网CentOS环境下安装NacosNacos Config 多环境的配置Nacos 有四大主要功能:服务发现和服务健康监测Nacos 支持基于 DNS 和基于 RPC 的服务发现。服务提供者使用 原生SDK、OpenAPI、或一个独立的Agent TODO注册 Service 后,服务消费者可以使用DNS TODO 或HTTP&API查找和发现服务。Nacos 提供对服务的实时的健康检查,阻止向不健康的主机或服务实例发送请求。Nacos 支持传输_nacos spring.datasource.platform

PXE批量装机-程序员宅基地

文章浏览阅读321次,点赞2次,收藏4次。网络装机概述网络装机优势规模化:同时装配多台主机自动化:装系统,配置各种服务远程实现:不需要光盘,U盘等物理安装介质什么是PXE网络PXE Pre-boot eXecution Environment预启动执行环境,在操作系统之前运行可用于远程安装工作模式PXE client 集成在网卡的启动芯片中当计算机引导时,从网卡芯片中PXE client调入内存执行,获取PX..._批量装机

python中的点表示什么_Python里面这些点,新手看完之后完全不知道这些点-程序员宅基地

文章浏览阅读3.7k次。原标题:Python里面这些点,新手看完之后完全不知道这些点Python虽然语法简单,通俗易懂,但是再简单它也是一门语言,就像一棵大树,总有一些树枝是弯弯绕绕的,让新手看完之后一脸懵逼,今天我们就来说说这几个点,反正我学的时候是很困惑的!01.函数里面的 *args1).可变参数这个是什么鬼,尤其是有其他c,c++语言基础的人,看到这个点,一定懵逼了,难道是指针,两个**又是什么鬼?其实这个Pyt..._python中四个点的意思

水印种类及原理概念?_水印类型csdn-程序员宅基地

文章浏览阅读554次。其中的水印信息可以是作者的序列号、公司标志、有特殊意义的文本等,可用来识别文件、图像或音乐制品的来源、版本、原作者、拥有者、发行人、合法使用人对数字产品的拥有权。脆弱数字水印主要用于完整性保护,与鲁棒水印的要求相反,脆弱水印必须对信号的改动很敏感,人们根据脆弱水印的状态就可以判断数据是否被篡改过。按水印所附载的媒体,我们可以将数字水印划分为图像水印、音频水印、视频水印、文本水印以及用于三维网格模型的网格水印等。按水印的用途,我们可以将数字水印划分为票据防伪水印、版权保护水印、篡改提示水印和隐蔽标识水印。_水印类型csdn

网课资源_慕课网资源分享-程序员宅基地

文章浏览阅读1.6k次。我要自学网-视频教程| https://www.51zxw.net/中国机器人网 - 中国机器人行业专业门户 http://www.robot-china.com/七月在线 - 国内领先的人工智能教育平台 https://www.julyedu.com/网易公开课 https://open.163.com/全部课程_IT培训精品课程-慕课网 http://www.imooc..._慕课网资源分享

#五#RedTiger's Hackit的wp-程序员宅基地

文章浏览阅读508次。做题链接:http://redtiger.labs.overthewire.org/关于知识点整理https://blog.csdn.net/weixin_43476037/article/details/87464475wplevel 1表名已知:level1_users,点开Category发现注入点cat构造?cat=1 union select 1,2,username,p...

随便推点

cocos2d-x-2.2的SimpleAudioEngine::sharedEngine()->playEffect()程序中断的bug_simpleaudioengine线程一直退出-程序员宅基地

文章浏览阅读2.2k次。程序一直都正常,但是忽然发现_simpleaudioengine线程一直退出

胖虎算法初练五之——删除排序数组中的重复项_nums[index++]-程序员宅基地

文章浏览阅读129次。删除排序数组中的重复项需求:给定一个排序数组,你需要在(原地 )删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。注意:你不需要考虑数组中超出新长度后面的元素。思路:刚开始看到这题想到是用集合set,可以去重,然后遍历集合重新给数组赋值,因为肯定有重复的元素,所以集合中的元素小于数组中的元素,这时候就提现返回值的重要性了。返回值就规定了这个数组的元素,就如上边需要注意的._nums[index++]

金沙江创投 张予彤:互联网下半场—从连接到数据-程序员宅基地

文章浏览阅读3k次。张予彤是金沙江创投的合伙人,专注于移动互联网、企业服务和人工智能领域早期公司的知名投资人,曾参与投资小红书,深鉴科技,Moka等优质公司。她本科毕业于清华大学电子工程系,..._金沙江 张予彤

C——Linux下的串口编程_52527.cfd-程序员宅基地

文章浏览阅读4.3k次。原 C——Linux下的串口编程 2017年06月06日 19:30:50 C_Aya 阅读数:11537 &lt;span class="tags-box artic-tag-box"&gt; &lt;span cla..._52527.cfd

CSS(四)详解Grid布局_grid-template-columns取消-程序员宅基地

文章浏览阅读1.2k次。这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解Grid布局又叫做..._grid-template-columns取消

ssl证书知识大全_enc sig-程序员宅基地

文章浏览阅读1.2k次。什么是SSL证书SSL证书是用于在WEB服务器与浏览器以及客户端之间建立加密链接的加密技术,通过配置和应用SSL证书来启用HTTPS协议,来保护互联网数据传输的安全,全球每天有数以亿计的网站都是通过HTTPS来确保数据安全,保护用户隐私。Understanding SSL server certificates with ExamplesSSL证书的作用为您的网站访客、企业建立信任和网络安全加密隐私数据。防止您访客的隐私信息(账号、地址、手机号等)被劫持或窃取地址栏安全锁。地址栏头部的“锁”型图_enc sig

推荐文章

热门文章

相关标签