Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼

更新時間：2017年07月21日 11:14:24 作者：大浪中航行

這篇文章主要介紹了Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼,需要的朋友可以參考下

需要用到的js

angular.js（用angular.min.js會導致分頁控件不顯示）

ui-bootstrap-tpls.min.js

angular-animate.js

需要用到的css

bootstrap.min.css

由于本項目使用了路由，所以講js以及css文件的應用都放在一個主html，請同學們在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 當前在哪一頁 2、PageSize 每頁展示多少條來的到的，因此后臺需要從前端獲取這兩個數(shù)值。又為了告訴用戶一共有多少頁，我們還要3、TotalSize 一共多少條。

現(xiàn)在有了上面1 2 3值，我們就可以來進行分頁了。在前端我們需要一個Table來幫我們展示數(shù)據(jù)，還需要一個小控件，讓用戶去選擇第幾頁，而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">答題數(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="首頁" previous-text="上一頁" next-text="下一頁" last-text="末頁" boundary-links="true" ng-change="pageChanged()" force-ellipses="false"></uib-pagination></span> 
 </div> 
 </div>

分頁是通過 uib-pagination 標簽來實現(xiàn)的，用到標簽屬性有：

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

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

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

ng-model:當前所在頁面

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

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

force-ellipses:當值為true時，超過max-size的也會以省略號的形式展現(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;//當前頁 
 $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; 
  }); 
 }; 
});

每次請求后臺需要將當前頁以及每頁的數(shù)量發(fā)送到后臺。

前臺接受到的json數(shù)據(jù)是這樣的

{"content":[{"id":225,"test":"辦公自動化是計算機的一項應用，按計算機應用分類，它屬于____。","op1":"數(shù)據(jù)處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","answer":"A","total":2,"totalCorrect":1},{"id":224,"test":"軟件由___和文檔兩部分組成。","op1":"數(shù)據(jù)","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":"數(shù)據(jù)處理","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":"數(shù)據(jù)處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","answer":"A","total":2,"totalCorrect":1},{"id":218,"test":"軟件由___和文檔兩部分組成。","op1":"數(shù)據(jù)","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":"數(shù)據(jù)處理","op2":"科學計算","op3":"實時控制","op4":"輔助設計","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 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);//構(gòu)建Pageable對象，改分頁查詢是通過jpa的PagingAndSortingRepository接口完成的 
  Page<Exam> Exams = examrepository.findAll(pageable); 
  return Exams; 
 }

repository代碼：

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

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

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

總結(jié)

以上所述是小編給大家介紹的Angular+Bootstrap+Spring Boot實現(xiàn)分頁功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Storage、cookie的用途和優(yōu)缺點比較
cookie的大小是受限制的，并且每次請求cookie都會被發(fā)送，浪費寬帶，cookie還需要指定作用域，不可以跨域調(diào)用。cookie的作用是與服務器進行交互，作為http規(guī)范的一部分存在，而webstorage僅僅是為了本地“存儲”數(shù)據(jù)而生。
2023-07-07
JavaScript中事件冒泡機制示例詳析
這篇文章主要給大家介紹了關于JavaScript中事件冒泡機制的相關資料,文中詳析介紹了什么是冒泡、冒泡捕獲需要以及冒泡和捕獲的具體區(qū)別,需要的的朋友可以參考下
2021-06-06
js實現(xiàn)手表表盤時鐘與圓周運動
這篇文章主要為大家詳細介紹了js實現(xiàn)手表表盤時鐘與圓周運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript實現(xiàn)求最大公共子串的方法
這篇文章主要介紹了JavaScript實現(xiàn)求最大公共子串的方法,涉及javascript針對字符串的遍歷、匹配、運算等相關操作技巧,需要的朋友可以參考下
2018-02-02
JavaScript學習筆記(三)：JavaScript也有入口Main函數(shù)
大家都知道在c和java中，有main函數(shù)貨main方法作為一個程序的入口函數(shù)或方法。在JS中從js源文件的頭部開始運行的，我們?nèi)匀豢梢蕴摌?gòu)出一個main函數(shù)來作為程序的起點，這樣一來不僅可以跟其他語言統(tǒng)一了，而且說不定你會對JS有更深的理解。感興趣的小伙跟著小編一起學習吧
2015-09-09
js代碼規(guī)范之Eslint安裝與配置詳解
這篇文章主要介紹了js代碼規(guī)范之Eslint安裝與配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
JavaScript時間操作之年月日星期級聯(lián)操作
這篇文章主要介紹了JavaScript時間操作之級聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下
2016-01-01
為原生js Array增加each方法
為原生js Array增加each方法，通過prototype來增加功能，進行擴展
2012-04-04
關于webpack代碼拆分的解析
本篇文章主要介紹了關于webpack代碼拆分的解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
微信小程序使用webview頁面轉(zhuǎn)pdf文件代碼示例
工作需求,將webview的內(nèi)容導出到pdf輸出,下面這篇文章主要給大家介紹了關于微信小程序使用webview頁面轉(zhuǎn)pdf文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09