需要用到的js
為企業(yè)提供做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站優(yōu)化、營銷型網(wǎng)站、競價托管、品牌運營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)建站擁有網(wǎng)絡(luò)營銷運營團隊，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！
angular.js（用angular.min.js會導(dǎo)致分頁控件不顯示）
ui-bootstrap-tpls.min.js
angular-animate.js
需要用到的css
bootstrap.min.css
由于本項目使用了路由，所以講js以及css文件的應(yīng)用都放在一個主html，請同學(xué)們在html頁面中添加以上文件
在開始之前，我先簡單介紹下分頁的原理。
分頁的實質(zhì)其實就是一條sql語句，
比如查找第二頁，即第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開始）：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語句中的這些數(shù)值是怎么計算得到的呢？它們就是根據(jù)1、CurrentPage 當(dāng)前在哪一頁 2、PageSize 每頁展示多少條 來的到的，因此后臺需要從前端獲取這兩個數(shù)值。又為了告訴用戶一共有多少頁，我們還要3、TotalSize 一共多少條 。
現(xiàn)在有了上面1 2 3值，我們就可以來進行分頁了。在前端我們需要一個Table來幫我們展示數(shù)據(jù)，還需要一個小控件，讓用戶去選擇第幾頁，而bootstrap就為我們提供了這個小控件（uib-pagination），大大減輕了我們的工作量。在后端Jpa又為我們提供了分頁接口，我們只需要繼承JapRepository即可，零代碼量！
下面就重點看Table、uib-pagination以及JapRepository提供的接口的用法。
html頁面代碼：
序號 題目 A B C D 答案 答題數(shù) 正確數(shù) 正確率 %
分頁是通過 uib-pagination 標(biāo)簽來實現(xiàn)的，用到標(biāo)簽屬性有：
total-items:表示總共有多少條記錄
items-per-page:每一頁顯示多少條記錄
max-size:決定用戶看到的頁數(shù)，即選擇頁面的按鈕，不理解的同學(xué)可以調(diào)整這個數(shù)值查看變化
ng-model:當(dāng)前所在頁面
以上4個屬性的值與js雙向綁定
boundary-link:顯示“首頁”、“末頁”按鈕
force-ellipses:當(dāng)值為true時，超過max-size的也會以省略號的形式展現(xiàn)
js代碼如下：
重慶分公司
重慶分公司
var app = angular.module("APP",['ui.bootstrap', 'ngAnimate']);
app.controller('QuestionCtrl', function($scope, $uibModal, $http) {
$scope.currentPage = 1;//當(dāng)前頁
$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;
});
}
$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;
});
};
}); 每次請求后臺需要將當(dāng)前頁以及每頁的數(shù)量發(fā)送到后臺。
前臺接受到的json數(shù)據(jù)是這樣的
{"content":[{"id":225,"test":"辦公自動化是計算機的一項應(yīng)用，按計算機應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計算","op3":"實時控制","op4":"輔助設(shè)計","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á)到某一目的而編寫的計算機指令序列稱為____。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":222,"test":"辦公自動化是計算機的一項應(yīng)用，按計算機應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計算","op3":"實時控制","op4":"輔助設(shè)計","answer":"A","total":2,"totalCorrect":1},{"id":220,"test":"為達(dá)到某一目的而編寫的計算機指令序列稱為____。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":219,"test":"辦公自動化是計算機的一項應(yīng)用，按計算機應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計算","op3":"實時控制","op4":"輔助設(shè)計","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á)到某一目的而編寫的計算機指令序列稱為____。","op1":"軟件","op2":"字符串","op3":"程序","op4":"命令","answer":"C","total":2,"totalCorrect":1},{"id":216,"test":"辦公自動化是計算機的一項應(yīng)用，按計算機應(yīng)用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學(xué)計算","op3":"實時控制","op4":"輔助設(shè)計","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}后臺controller代碼
@RequestMapping(value = "/getExamsByPage") @ResponseBody public PagegetExamsByPage(@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對象，改分頁查詢是通過jpa的PagingAndSortingRepository接口完成的 Page Exams = examrepository.findAll(pageable); return Exams; }
repository代碼：
