angular+bootstrap+spring boot实现分页

最新推荐文章于 2024-07-06 14:08:56 发布

大浪中航行

最新推荐文章于 2024-07-06 14:08:56 发布

阅读量9.3k

点赞数 2

分类专栏： angularjs spring-boot j2ee 文章标签： angular 分页 uib-pagination PagingAndSortingRepo

本文链接：https://blog.csdn.net/dalangzhonghangxing/article/details/51982878

版权

本文介绍了如何结合Angular、Bootstrap和Spring Boot实现分页功能。讲解了分页的基本原理，并展示了HTML、JS和后台Controller及Repository的代码实现。利用uib-pagination控件和JpaRepository接口，实现了前后端的无缝对接，简化了分页开发过程。

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

需要用到的js

angular.js（用angular.min.js会导致分页控件不显示）

ui-bootstrap-tpls.min.js

angular-animate.js

需要用到的css

bootstrap.min.css

由于本项目使用了路由，所以讲js以及css文件的应用都放在一个主html，请同学们在html页面中添加以上文件

在开始之前，我先简单介绍下分页的原理。

分页的实质其实就是一条sql语句，

比如查找第二页，即第16到第30条数据

在mysql中是select * from table limit 15,15 order by id desc

Sql server中是select * from (select top 15 * from
(select top (30) * from table order by id desc) order by available asc) order by id desc

Oracle是（Oracle中的row从1开始）：select * from
(select a.*,rownum from
(select * from tablet order by id desc) a
) b
where b.rownum between 16 and 30

一般情况下，查询得到的数据采用倒序排序，这样可以将用户最新插入的数据放在最前面。

那么这三条sql语句中的这些数值是怎么计算得到的呢？它们就是根据1、CurrentPage 当前在哪一页 2、PageSize 每页展示多少条来的到的，因此后台需要从前端获取这两个数值。又为了告诉用户一共有多少页，我们还要3、TotalSize 一共多少条。

现在有了上面1 2 3值，我们就可以来进行分页了。在前端我们需要一个Table来帮我们展示数据，还需要一个小控件，让用户去选择第几页，而bootstrap就为我们提供了这个小控件（uib-pagination），大大减轻了我们的工作量。在后端Jpa又为我们提供了分页接口，我们只需要继承JapRepository即可，零代码量！

下面就重点看Table、uib-pagination以及JapRepository提供的接口的用法。

html页面代码：

<div data-ng-controller="QuestionCtrl" class="container" style="width: 1900px;">
	<br>
	<table class="table table-bordered table-hover ">
		<thead>
			<tr>
				<th class="text-center"><input type="checkbox"
					data-ng-model="allChecked" data-ng-change="checkAll(allChecked)" /></th>
				<th class="text-center">序号</th>
				<th class="text-center">题目</th>
				<th class="text-center">A</th>
				<th class="text-center">B</th>
				<th class="text-center">C</th>
				<th class="text-center">D<