ajax实现表格分页功能

核爆木马

已于 2024-06-19 16:46:56 修改

阅读量568

点赞数 1

文章标签： java mysql jquery ajax

于 2021-05-19 23:23:01 首次发布

本文链接：https://blog.csdn.net/m0_46233451/article/details/117048899

版权

这篇博客介绍了如何利用Ajax、Java、MySQL和jQuery实现表格数据的分页功能。首先讲解了MySQL的分页查询语法，然后阐述了后端查询公式，接着通过SpringBoot展示了具体的代码实现，包括实体对象、Mapper和Controller的配置。最后，文章提到了实际应用的效果。

摘要由CSDN通过智能技术生成

一.数据库分页查询

1.mysql分页查询

select * from table limit a,b
a:下标，从0开始
b:长度

mysql> select * from stu limit 0,10;
+----+--------+-----------------------------------------+------------+
| id | name   | address                                 | birthday   |
+----+--------+-----------------------------------------+------------+
|  1 | 张三   | 中国湖南                                | 2021-03-30 |
|  2 | 李四   | 中国湖北                                | 2021-03-30 |
|  3 | 阴毅   | 甘肃省酒泉市                            | 2020-07-12 |
|  4 | 胡明   | 内蒙古自治区兴安盟                      | 2020-07-18 |
|  5 | 辜希   | 河南省焦作市                            | 2020-04-15 |
|  6 | 喻翔   | 黑龙江省鹤岗市                          | 2020-05-09 |
|  7 | 巫馥   | 湖南省永州市                            | 2020-02-25 |
|  8 | 常海   | 新疆维吾尔自治区克拉玛依市              | 2020-10-16 |
|  9 | 粟源   | 河南省周口市                            | 2020-06-25 |
| 10 | 凤丕   | 辽宁省葫芦岛市                          | 2020-07-29 |
+----+--------+-----------------------------------------+------------+
10 rows in set (0.00 sec)

mysql> select * from stu limit 5,3;
+----+--------+-----------------------------------------+------------+
| id | name   | address                                 | birthday   |
+----+--------+-----------------------------------------+------------+
|  6 | 喻翔   | 黑龙江省鹤岗市                          | 2020-05-09 |
|  7 | 巫馥   | 湖南省永州市                            | 2020-02-25 |
|  8 | 常海   | 新疆维吾尔自治区克拉玛依市              | 2020-10-16 |
+----+--------+-----------------------------------------+------------+
3 rows in set (0.00 sec)

2.后端查询公式

查询公式：
start = (page-1) * pageSize
select * from table limit start, pageSize
page:当前页数
pageSize:一页有几行

二.代码部分

本文使用springboot演示。
导入maven依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>