因爲項目的需要需要實現頁面的分頁功能，需要用到AngularJS+Bootstrap來實現頁面的分頁功能，同時支持模糊查詢分頁。
思考了一下需要確定要完成以下步驟：
一、完成頁面的頁碼數顯示
1、獲取總條數
2、根據頁數獲取對應當前顯示的頁數
二、按照頁碼數點擊讀取對應的數據
1、傳入對應的起始條數來獲取對應的數據
三、獲取模糊查詢結果的頁碼數顯示
1、獲取模糊查詢的總條數
2、獲取對應可以顯示的頁數
四、按照頁碼數和模糊查詢來獲取對應數據
1、對應傳入起始的獲取條數和模糊查詢的字符來獲取數據
以下是javascript代碼：
/*
*傳入數據獲取對應的頁面的數據
*@param {int} star 開始讀取的點
*@param {int} size 需要讀取的條數
*/
$scope.getCopInfo = function (star,size) {
//這個是封裝的ajax函數的調用，詳細的過程不表，傳入一個回掉函數
Utils.AjaxInterfaceService('getCorporations', function (res) {
if (res.Flag) {
var dat = res.MsgInfo;
var list = star+1;
$scope.allListData = angular.copy(dat);
//遍歷添加頁面顯示條數
for (var i = 0; i < $scope.allListData.length; i++) {
$scope.allListData[i].number = list++;
}
} else {
alert(res.ErrInfo);
}
//傳入對應的用戶id，需要安全過濾用戶權限，後臺詳細不表
}, { userid: userInfo.USERID, pageStar: star, pageSize: size }, "get", false)
}
/*
*傳入數據獲取對應的頁面的數據，獲取模糊查詢的結果
*@param {int} star 開始讀取的點
*@param {int} size 需要讀取的條數
*/
$scope.getCopInfoLike = function (star, size) {
Utils.AjaxInterfaceService('getCorporationsLike', function (res) {
if (res.Flag) {
var dat = res.MsgInfo;
var list = star + 1;
$scope.allListData = angular.copy(dat);
//遍歷添加條數
for (var i = 0; i < $scope.allListData.length; i++) {
$scope.allListData[i].number = list++;
}
} else {
alert(res.ErrInfo);
}
//封裝了具體輸入框綁定的數據，進行模糊查詢，後臺詳細sql不表
}, { userid: userInfo.USERID, pageStar: star, pageSize: size, likeData: $scope.searchText }, "get", false)
}
//初始化顯示的總頁數
$scope.PageLength = null;
/*
*獲取查詢的結果的總條數，然後按每頁十條來顯示數據
*/
$scope.getCopLength = function () {
Utils.AjaxInterfaceService('getCorporationsLength', function (res) {
if (res.Flag) {
var dat = angular.copy(res.MsgInfo);
$scope.PageLength = Math.ceil(parseFloat(dat[0].info) / 10);
} else {
alert(res.ErrInfo);
}
}, { userid: userInfo.USERID }, "get", false)
}
/*
*獲取模糊查詢的結果的總條數，然後按每頁十條來顯示數據
*/
$scope.getCopLengthLike = function () {
Utils.AjaxInterfaceService('getCorporationsLengthLike', function (res) {
if (res.Flag) {
var dat = angular.copy(res.MsgInfo);
$scope.PageLength = Math.ceil(parseFloat(dat[0].info) / 10);
} else {
alert(res.ErrInfo);
}
}, { userid: userInfo.USERID, likeData: $scope.searchText }, "get", false)
}
//需要顯示的頁碼數據初始化
$scope.PageData = [];
/*
*點擊頁數改變，完成相應的頁數的改變
*@param {int} page 傳入需要顯示的頁數
*/
$scope.changePage = function (page) {
//初始化顯示的條數，和sql讀取的真實起始
var size = 10;
var star = (size * (page - 1)) - 1;
if (star < 0) {
star = 0;
}
//獲取對應頁數的數據.要是有模糊查詢的詞就要模糊查詢
if ($scope.searchText) {//模糊查詢
$scope.getCopInfoLike(star, 10);
} else {//正常查詢
$scope.getCopInfo(star, 10);
}
//獲取對應頁數的數據,顯示對應5個頁碼
var forStar = 0;
$scope.PageData = [];
if ($scope.PageLength < 5) {
forStar = $scope.PageLength;
} else {
forStar = 5;
}
//選中的頁數顯示在中間，要是當前的頁數不能中間顯示也需要判斷
var starpage = page - 2;
var endPage = page + 2;
if (endPage > $scope.PageLength) {
starpage -= endPage - $scope.PageLength;
}
if (starpage <= 0) {
starpage = 1;
}
//循環出對應的頁碼數
for (; forStar > 0; forStar--) {
var namber = starpage++;
var actve = false;
//對應的頁碼選中當前頁
if (namber === page) {
actve = true;
}
var pageInfo = {
page: namber,
active: actve
};
$scope.PageData.push(pageInfo);
}
}
/*
*點擊加載顯示對應的彈出框的綁定事件
*這個函數完成正常的數據展示
*/
$scope.showCopInfo = function () {
//清空搜索數據
$scope.searchText = "";
//默認正常查詢
$scope.getCopLength();
$scope.changePage(1);
$('#myModal').modal('show');
}
//搜索框數據初始化
$scope.searchText = "";
/*
*監聽搜索框綁定的數據，要是數據變化查詢對應的數據
*缺點就是只要有改變就會請求，可以使用change時間來觸發，或者使用按鈕的click事件來觸發
*這個函數完成模糊搜索的實現
*/
$scope.$watch('searchText', function () {
//傳入數據查詢模糊查詢結果
if ($scope.searchText) {
$scope.getCopLengthLike();
$scope.changePage(1);
}
});對應的html代碼：
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">公司資料</h4>
</div>
<div class="modal-body">
<div class="table_box jlp-scroll-table">
<div class="searchBox has-feedback">
<input type="text" class="form-control" placeholder="公司名稱、層級" ng-model="searchText" />
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<table class="table table-hover">
<thead class="jlp-table-thcolor">
<tr>
<th>#</th>
<th>公司名稱</th>
<th>公司層級</th>
</tr>
</thead>
<tbody>
<tr ng-dblclick="showRowData($index)" ng-class="{selectStyle:$index==selectRow}" ng-repeat="item in allListData">
<th scope="row">{{item.number}}</th>
<td ng-bind='item.CorpName'></td>
<td ng-bind='item.CorpLevel'></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<center>
<nav aria-label="Page navigation">
<ul class="pagination" style="margin: 0px;">
<li>
<a aria-label="Previous" ng-click="changePage(1)">
<span aria-hidden="true">« 第1頁</span>
</a>
</li>
<li ng-repeat="d in PageData" ng-class="{true: 'active', false: ''}[d.active]">
<a ng-click="changePage(d.page)">{{d.page}}</a>
</li>
<li>
<a aria-label="Next" ng-click="changePage(PageLength)">
<span aria-hidden="true">第{{PageLength}}頁 »</span>
</a>
</li>
</ul>
</nav>
</center>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>效果：
