需要用到的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</th><th class="text-center">答案</th><th class="text-center">答題數</th><th class="text-center">正確數</th><th class="text-center">正確率</th></tr></thead><tbody><tr data-ng-repeat="item in items"><td class="text-center"><input type="checkbox"data-ng-model="item.$checked" data-ng-changed="checkedChange(item.id,item.$checked)"/></td><td class="text-center"><span data-ng-bind="$index+1"></span></td><td class="text-center"data-ng-bind="item.test"></td><td class="text-center" data-ng-bind="item.op1"></td><td class="text-center" data-ng-bind="item.op2"></td><td class="text-center" data-ng-bind="item.op3"></td><td class="text-center" data-ng-bind="item.op4"></td><td class="text-center" data-ng-bind="item.answer"></td><td class="text-center" data-ng-bind="item.total"></td><td class="text-center" data-ng-bind="item.totalCorrect"></td><td class="text-center"><span data-ng-if="item.total!=0" data-ng-bind="item.totalCorrect / item.total * 100 | number:2 "></span><span data-ng-if="item.total==0" data-ng-bind="0"></span>%</td></tr></tbody></table><div class="text-right"><button class="btn btn-defualt" style="float: left" data-ng-click="deleteItems()">刪除</button><span style="color:#ff0000;"><uib-pagination total-items="TotalItems" ng-model="currentPage" items-per-page = "numPerPage" max-size="maxSize" class="pagination" first-text="首頁" previous-text="上一頁" next-text="下一頁" last-text="末頁" boundary-links="true" ng-change="pageChanged()" force-ellipses="false"></uib-pagination></span></div></div>
分頁是通過?uib-pagination 標簽來實現的，用到標簽屬性有：

total-items:表示總共有多少條記錄

items-per-page:每一頁顯示多少條記錄

max-size:決定用戶看到的頁數，即選擇頁面的按鈕，不理解的同學可以調整這個數值查看變化

ng-model:當前所在頁面

以上4個屬性的值與js雙向綁定

boundary-link:顯示“首頁”、“末頁”按鈕

force-ellipses:當值為true時，超過max-size的也會以省略號的形式展現

js代碼如下：

var app = angular.module("APP",['ui.bootstrap', 'ngAnimate']); app.controller('QuestionCtrl', function($scope, $uibModal, $http) {<span style="color:#ff0000;">$scope.currentPage = 1;//當前頁$scope.numPerPage = 15;$scope.maxSize = 5;$http({url : '/getExamsByPage',method : 'post',params : {'currentPage' : $scope.currentPage - 1,'numPerPage' : $scope.numPerPage}}).success(function(response) {$scope.TotalItems = response.totalElements;$scope.items = response.content;});$scope.pageChanged = function() {$http({url : '/getExamsByPage',method : 'post',params : {'currentPage' : $scope.currentPage - 1,'numPerPage' : $scope.numPerPage}}).success(function(response) {$scope.TotalItems = response.totalElements;$scope.items = response.content;});}</span>$scope.checkAll = function(checked) {angular.forEach($scope.items, function(item) {item.$checked = checked;});};$scope.deleteExam = function(id) {$http({url : '/deleteexam',method : 'post',params : {'id' : id,'currentPage' : $scope.currentPage - 1,'numPerPage' : $scope.numPerPage}}).success(function(response) {$scope.TotalItems = response.totalElements;$scope.items = response.content;});}$scope.deleteItems = function() {var checkedlist = new Array();angular.forEach($scope.items, function(item) {if (item.$checked == true)checkedlist.push(item.id);});$http({url : "/deleteexams",method : "post",params : {'ids' : checkedlist,'currentPage' : $scope.currentPage - 1,'numPerPage' : $scope.numPerPage}}).success(function(response) {$scope.TotalItems = response.totalElements;$scope.items = response.content;});};});
每次請求后臺需要將當前頁以及每頁的數量發送到后臺。

前臺接受到的json數據是這樣的

{"content":[{"id":225,"test":"辦公自動化是計算機的一項應用，按計算機應用分類，它屬于____。","op1":"數據處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","answer":"A","total":2,"totalCorrect":1},{"id":224,"test":"軟件由___和文檔兩部分組成。","op1":"數據","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1},{"id":223,"test":"為達到某一目的而編寫的計算機指令序列稱為____。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":222,"test":"辦公自動化是計算機的一項應用，按計算機應用分類，它屬于____。","op1":"數據處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","answer":"A","total":2,"totalCorrect":1},{"id":220,"test":"為達到某一目的而編寫的計算機指令序列稱為____。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":219,"test":"辦公自動化是計算機的一項應用，按計算機應用分類，它屬于____。","op1":"數據處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","answer":"A","total":2,"totalCorrect":1},{"id":218,"test":"軟件由___和文檔兩部分組成。","op1":"數據","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1},{"id":217,"test":"為達到某一目的而編寫的計算機指令序列稱為____。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":216,"test":"辦公自動化是計算機的一項應用，按計算機應用分類，它屬于____。","op1":"數據處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","answer":"A","total":2,"totalCorrect":1},{"id":215,"test":"軟件由___和文檔兩部分組成。","op1":"數據","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1}],"last":false,"totalPages":9,"totalElements":86,"number":0,"size":10,"sort":[{"direction":"DESC","property":"id","ignoreCase":false,"nullHandling":"NATIVE","ascending":false}],"numberOfElements":10,"first":true}

后臺controller代碼

@RequestMapping(value = "/getExamsByPage")@ResponseBodypublic Page<Exam> getExamsByPage(@RequestParam(value = "currentPage",defaultValue = "0") Integer page,@RequestParam(value = "numPerPage",defaultValue = "10") Integer pageSize) {Sort sort = new Sort(Direction.DESC, "id");//設置排序方式Pageable pageable = new PageRequest(page, pageSize, sort);//構建Pageable對象，改分頁查詢是通過jpa的PagingAndSortingRepository接口完成的Page<Exam> Exams = examrepository.findAll(pageable);return Exams;}

repository代碼：

@Transactional public interface ExamRepository extends JpaRepository<Exam, Integer> {}

contoller中調用的findAll方法是PagingAndSortingRepository實現的，但是JpaRepository繼承自PagingAndSortingRepository，因此也有findAll方法，不明白的同學可以去查閱改接口的資料。

這樣就完成了分頁顯示，圖片如下

總結

以上是生活随笔為你收集整理的angular+bootstrap+spring boot实现分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。