Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼
需要用到的js
angular.js（用angular.min.js會(huì)導(dǎo)致分頁(yè)控件不顯示）
ui-bootstrap-tpls.min.js
angular-animate.js
需要用到的css
bootstrap.min.css
由于本項(xiàng)目使用了路由，所以講js以及css文件的應(yīng)用都放在一個(gè)主html，請(qǐng)同學(xué)們?cè)趆tml頁(yè)面中添加以上文件
在開(kāi)始之前，我先簡(jiǎn)單介紹下分頁(yè)的原理。
分頁(yè)的實(shí)質(zhì)其實(shí)就是一條sql語(yǔ)句，
比如查找第二頁(yè)，即第16到第30條數(shù)據(jù)
在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開(kāi)始）：select * from (select a.*,rownum from (select * from tablet order by id desc) a ) b where b.rownum between 16 and 30
一般情況下，查詢得到的數(shù)據(jù)采用倒序排序，這樣可以將用戶最新插入的數(shù)據(jù)放在最前面。
那么這三條sql語(yǔ)句中的這些數(shù)值是怎么計(jì)算得到的呢？它們就是根據(jù)1、CurrentPage 當(dāng)前在哪一頁(yè) 2、PageSize 每頁(yè)展示多少條 來(lái)的到的，因此后臺(tái)需要從前端獲取這兩個(gè)數(shù)值。又為了告訴用戶一共有多少頁(yè)，我們還要3、TotalSize 一共多少條 。
現(xiàn)在有了上面1 2 3值，我們就可以來(lái)進(jìn)行分頁(yè)了。在前端我們需要一個(gè)Table來(lái)幫我們展示數(shù)據(jù)，還需要一個(gè)小控件，讓用戶去選擇第幾頁(yè)，而bootstrap就為我們提供了這個(gè)小控件（uib-pagination），大大減輕了我們的工作量。在后端Jpa又為我們提供了分頁(yè)接口，我們只需要繼承JapRepository即可，零代碼量！
下面就重點(diǎn)看Table、uib-pagination以及JapRepository提供的接口的用法。
html頁(yè)面代碼：
<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">序號(hào)</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">答題數(shù)</th>
<th class="text-center">正確數(shù)</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="首頁(yè)" previous-text="上一頁(yè)" next-text="下一頁(yè)" last-text="末頁(yè)" boundary-links="true" ng-change="pageChanged()" force-ellipses="false"></uib-pagination></span>
</div>
</div>
分頁(yè)是通過(guò) uib-pagination 標(biāo)簽來(lái)實(shí)現(xiàn)的，用到標(biāo)簽屬性有：
total-items:表示總共有多少條記錄
items-per-page:每一頁(yè)顯示多少條記錄
max-size:決定用戶看到的頁(yè)數(shù)，即選擇頁(yè)面的按鈕，不理解的同學(xué)可以調(diào)整這個(gè)數(shù)值查看變化
ng-model:當(dāng)前所在頁(yè)面
以上4個(gè)屬性的值與js雙向綁定
boundary-link:顯示“首頁(yè)”、“末頁(yè)”按鈕
force-ellipses:當(dāng)值為true時(shí)，超過(guò)max-size的也會(huì)以省略號(hào)的形式展現(xiàn)
js代碼如下：
var app = angular.module("APP",['ui.bootstrap', 'ngAnimate']);
app.controller('QuestionCtrl', function($scope, $uibModal, $http) {
<span style="color:#ff0000;">$scope.currentPage = 1;//當(dāng)前頁(yè)
$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;
});
};
});
每次請(qǐng)求后臺(tái)需要將當(dāng)前頁(yè)以及每頁(yè)的數(shù)量發(fā)送到后臺(tái)。
前臺(tái)接受到的json數(shù)據(jù)是這樣的
{"content":[{"id":225,"test":"辦公自動(dòng)化是計(jì)算機(jī)的一項(xiàng)應(yīng)用，按計(jì)算機(jī)應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計(jì)算","op3":"實(shí)時(shí)控制","op4":"輔助設(shè)計(jì)","answer":"A","total":2,"totalCorrect":1},{"id":224,"test":"軟件由___和文檔兩部分組成。","op1":"數(shù)據(jù)","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1},{"id":223,"test":"為達(dá)到某一目的而編寫(xiě)的計(jì)算機(jī)指令序列稱為_(kāi)___。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":222,"test":"辦公自動(dòng)化是計(jì)算機(jī)的一項(xiàng)應(yīng)用，按計(jì)算機(jī)應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計(jì)算","op3":"實(shí)時(shí)控制","op4":"輔助設(shè)計(jì)","answer":"A","total":2,"totalCorrect":1},{"id":220,"test":"為達(dá)到某一目的而編寫(xiě)的計(jì)算機(jī)指令序列稱為_(kāi)___。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":219,"test":"辦公自動(dòng)化是計(jì)算機(jī)的一項(xiàng)應(yīng)用，按計(jì)算機(jī)應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計(jì)算","op3":"實(shí)時(shí)控制","op4":"輔助設(shè)計(jì)","answer":"A","total":2,"totalCorrect":1},{"id":218,"test":"軟件由___和文檔兩部分組成。","op1":"數(shù)據(jù)","op2":"指令","op3":"程序","op4":"工具","answer":"C","total":2,"totalCorrect":1},{"id":217,"test":"為達(dá)到某一目的而編寫(xiě)的計(jì)算機(jī)指令序列稱為_(kāi)___。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":216,"test":"辦公自動(dòng)化是計(jì)算機(jī)的一項(xiàng)應(yīng)用，按計(jì)算機(jī)應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計(jì)算","op3":"實(shí)時(shí)控制","op4":"輔助設(shè)計(jì)","answer":"A","total":2,"totalCorrect":1},{"id":215,"test":"軟件由___和文檔兩部分組成。","op1":"數(shù)據(jù)","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}
后臺(tái)controller代碼
@RequestMapping(value = "/getExamsByPage")
@ResponseBody
public Page<Exam> getExamsByPage(@RequestParam(value = "currentPage",defaultValue = "0") Integer page,
@RequestParam(value = "numPerPage",defaultValue = "10") Integer pageSize) {
Sort sort = new Sort(Direction.DESC, "id");//設(shè)置排序方式
Pageable pageable = new PageRequest(page, pageSize, sort);//構(gòu)建Pageable對(duì)象，改分頁(yè)查詢是通過(guò)jpa的PagingAndSortingRepository接口完成的
Page<Exam> Exams = examrepository.findAll(pageable);
return Exams;
}
repository代碼：
@Transactional
public interface ExamRepository extends JpaRepository<Exam, Integer> {
}
contoller中調(diào)用的findAll方法是PagingAndSortingRepository實(shí)現(xiàn)的，但是JpaRepository繼承自PagingAndSortingRepository，因此也有findAll方法，不明白的同學(xué)可以去查閱改接口的資料。
這樣就完成了分頁(yè)顯示，圖片如下
總結(jié)
以上所述是小編給大家介紹的Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- SpringBoot與Angular2的集成示例
- Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
- 玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC（4）
- 玩轉(zhuǎn)spring boot 結(jié)合jQuery和AngularJs（3）
- 詳解springboot和vue前后端分離開(kāi)發(fā)跨域登陸問(wèn)題
- SpringBoot+Vue.js實(shí)現(xiàn)前后端分離的文件上傳功能
- vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題解決方法
- spring boot+vue 的前后端分離與合并方案實(shí)例詳解
- springboot+angular4前后端分離 跨域問(wèn)題解決詳解
相關(guān)文章
JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript前端開(kāi)發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫(xiě)操作
這篇文章主要介紹了JavaScript前端開(kāi)發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫(xiě)操作的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要分享了JavaScript?微任務(wù)和宏任務(wù)講解，在js中，我們一般將所有的任務(wù)都分成兩類，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細(xì)致的分類，那就是微任務(wù)和宏任務(wù)，下面來(lái)一起學(xué)習(xí)js中的微任務(wù)和宏任務(wù)吧2021-12-12
超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的方法
這篇文章為大家分享了一個(gè)超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的具體實(shí)現(xiàn)方法，根據(jù)身份證號(hào)對(duì)其進(jìn)行性別的判定，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript實(shí)現(xiàn)使用Canvas繪制圖形的基本教程
本篇文章主要介紹了JavaScript實(shí)現(xiàn)使用Canvas繪制圖形的基本教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
ionic 3.0+ 項(xiàng)目搭建運(yùn)行環(huán)境的教程
本篇文章主要介紹了ionic 3.0+ 項(xiàng)目搭建運(yùn)行的教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
詳解Javascript 中的 class、構(gòu)造函數(shù)、工廠函數(shù)
這篇文章主要介紹了詳解Javascript 中的 class、構(gòu)造函數(shù)、工廠函數(shù),需要的朋友可以參考下2017-12-12
學(xué)習(xí)的目的是對(duì)裝飾者模式模式有進(jìn)一步的理解，并運(yùn)用在自己的項(xiàng)目中；對(duì)TypeScript裝飾器的理解，更好的使用裝飾器，例如在nodejsweb框架中、vue-property-decorator中，或者是自定義裝飾器，能熟練運(yùn)用并掌握其基本的實(shí)現(xiàn)原理。2021-04-04
基于zepto.js簡(jiǎn)單實(shí)現(xiàn)上傳圖片
這篇文章主要介紹了基于zepto.js簡(jiǎn)單實(shí)現(xiàn)上傳圖片的相關(guān)資料,需要的朋友可以參考下2016-06-06