angular分頁插件
angular
使用
分頁
外掛
html:
<pagination total-items= ng-model= items-per-page= previous-text= next-text= page-sizes= edit-page= ng-change=> //获取数据的方法 </pagination>
登入後複製
js:資料取多次每翻頁都重新取資料
$scope.currentPage = = = [,, , , = ==($scope.currentPage>&&! =: $scope.currentPage-=, angular.toJson(=== Math.ceil($scope.totalItems /=
登入後複製
js:分頁狀況:資料只取一次
// 分页情况:数据只取一次
($scope.getData = function (currentPage, itemPerPage) {if (angular.isUndefined($scope.dataList)) {var params = {'pageIndex': currentPage,'pageSize': itemPerPage,'insuranceOrgCode': $scope.insuranceOrgCode,'prodType': $scope.prodType,'productName': $scope.productName,
};
$http.post('/product/getProductList.do', params).success(function (res) {
$scope.dataList = res.data.listObj;
$scope.totalItems = ($scope.dataListStore = res.data.listObj).length;
$scope.pageCount = Math.ceil($scope.totalItems / itemPerPage);
$scope.getData(currentPage, itemPerPage)
})
} else {var start = itemPerPage * (currentPage - 1);var end = ($scope.totalItems < itemPerPage * currentPage) ? $scope.totalItems : itemPerPage * currentPage;
$scope.dataList = ($scope.dataListStore.slice(start, end));
}
})($scope.currentPage = 1, $scope.itemPerPage = 2, $scope.pageSizes = [2,10, 20, 50, 100], $scope.editPage = true);登入後複製
#
以下是引入的分頁外掛程式檔案
/*
* angular-ui-bootstrap
* http://angular-ui.github.io/bootstrap/
* Version: 0.12.1 - 2015-10-17
* License: MIT
* ReWrite Ver:1.0.1
* Fixed:页数只能输入数字
*
* ReWrite Ver:1.0.2
* Fixed:页数计算优化 *///angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.pagination"]);//angular.module("ui.bootstrap.tpls", ["template/pagination/pager.html","template/pagination/pagination.html"]);angular.module('ui.bootstrap.pagination', ["template/pagination/pager.html","template/pagination/pagination.html"])
.controller('PaginationController', ['$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) {
$scope.pageSizes =[2,10, 20, 50, 100, 300, 500]; var self = this,
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop; this.init = function(ngModelCtrl_, config) {
ngModelCtrl = ngModelCtrl_;this.config = config;
ngModelCtrl.$render = function() {
self.render();
};if ($attrs.itemsPerPage) {
$scope.$parent.$watch($parse($attrs.itemsPerPage), function(n,o) {if(n) {
self.itemsPerPage = parseInt(n, 10);
$scope.itemPerPage = parseInt(n, 10);
$scope.totalPages = self.calculateTotalPages();
}
});
} else { this.itemsPerPage = config.itemsPerPage;
}
}; this.calculateTotalPages = function() {var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage);return Math.max(totalPages || 0, 1);
}; this.render = function() {if(ngModelCtrl.$viewValue!='')
$scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
};
$scope.selectPage = function(page) {
console.log('page:',page)if (/^[0-9]+$/.test(page)) { if ($scope.page !== page && page > 0 && page <= $scope.totalPages) {
ngModelCtrl.$setViewValue(page);
ngModelCtrl.$render();
} if(page==1){
setTimeout(function () {
$("#paginationNum").focus();
$("#paginationNum").select();
})
}
}else {
$scope.selectPage($scope.currentPage='1');
}
};
$scope.getText = function( key ) {return $scope[key + 'Text'] || self.config[key + 'Text'];
};
$scope.noPrevious = function() {return $scope.page === 1;
};
$scope.noNext = function() {return $scope.page === $scope.totalPages;
};
$scope.$watch('totalItems', function() {
$scope.totalPages = self.calculateTotalPages();
});
$scope.$watch('totalPages', function(value) {
setNumPages($scope.$parent, value); // Readonly variableif ( $scope.page > value ) {
$scope.selectPage(value);
} else {
ngModelCtrl.$render();
}
});
$scope.checkPage=function(min,max,c) {var current = c;if (typeof current != 'string' || current.length > 0){
current = current < min ? min : current > max ? max : current;
}return current;
};// $scope.keyDown = function (page) {// var oEvent = window.event;// if (oEvent.keyCode == 8 && page == 1) {// $("#paginationNum").focus();// $("#paginationNum").select();// }// };//window.keyDown = function () {var oEvent = window.event;if (oEvent.keyCode == 8 && $scope.currentPage == 1) {
$("#paginationNum").focus();
$("#paginationNum").select();
}
}
}])
.constant('paginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
directionLinks: true,
firstText: 'First',
previousText: 'Previous',
nextText: 'Next',
lastText: 'Last',
rotate: true})
.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) { return {
restrict: 'EA',
scope: {
totalItems: '=',
itemsPerPage:'=',
pageSizes:'=',
editPage:'=',
firstText: '@',
previousText: '@',
nextText: '@',
lastText: '@',
currentPage:'=ngModel'},
require: ['pagination', '?ngModel'],
controller: 'PaginationController',
templateUrl: 'template/pagination/pagination.html',
replace: true,
link: function(scope, element, attrs, ctrls) { var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1]; if (!ngModelCtrl) {return; // do nothing if no ng-model }
scope.$watch('itemsPerPage',function(n,o){if(n&&n!=o) {
ngModelCtrl.$setViewValue(0);
ngModelCtrl.$setViewValue(1);
ngModelCtrl.$render();
}
}) // Setup configuration parameters var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
paginationCtrl.init(ngModelCtrl, paginationConfig); if (attrs.maxSize) {
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
maxSize = parseInt(value, 10);
paginationCtrl.render();
});
} // Create page object used in template function makePage(number, text, isActive) {return {
number: number,
text: text,
active: isActive
};
}
function getPages(currentPage, totalPages) {var pages = [];// Default page limitsvar startPage = 1, endPage = totalPages;var isMaxSized = ( angular.isDefined(maxSize) && maxSize < totalPages );// recompute if maxSizeif ( isMaxSized ) { if ( rotate ) {// Current page is displayed in the middle of the visible onesstartPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
endPage = startPage + maxSize - 1;// Adjust if limit is exceededif (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + 1;
}
} else {// Visible pages are paginated with maxSizestartPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;// Adjust last page if limit is exceededendPage = Math.min(startPage + maxSize - 1, totalPages);
}
}// Add page number linksfor (var number = startPage; number <= endPage; number++) { //ignore those unused numbers if(number == startPage||number == endPage || number < currentPage+10&&number > currentPage-10) {var page = makePage(number, number, number === currentPage);
pages.push(page);
}
}// Add links to move between page setsif ( isMaxSized && ! rotate ) { if ( startPage > 1 ) {var previousPageSet = makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
} if ( endPage < totalPages ) {var nextPageSet = makePage(endPage + 1, '...', false);
pages.push(nextPageSet);
}
}return pages;
} var originalRender = paginationCtrl.render;
paginationCtrl.render = function() {
originalRender();if (scope.page > 0 && scope.page <= scope.totalPages) {
scope.pages = getPages(scope.page, scope.totalPages);
}
};
}
};
}])
.constant('pagerConfig', {
itemsPerPage: 10,
previousText: '« Previous',
nextText: 'Next »',
align: true})
.directive('pager', ['pagerConfig', function(pagerConfig) { return {
restrict: 'EA',
scope: {
totalItems: '=',
previousText: '@',
nextText: '@'},
require: ['pager', '?ngModel'],
controller: 'PaginationController',
templateUrl: 'template/pagination/pager.html',
replace: true,
link: function(scope, element, attrs, ctrls) { var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1]; if (!ngModelCtrl) {return; // do nothing if no ng-model }
scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
paginationCtrl.init(ngModelCtrl, pagerConfig);
}
};
}]);
angular.module("template/pagination/pager.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/pagination/pager.html", "<ul class=\"pager\">\n" + " <li ng-class=\"{disabled: noPrevious(), previous: align}\"><a href ng-click=\"selectPage(page - 1)\">{{getText('previous')}}</a></li>\n" + " <li ng-class=\"{disabled: noNext(), next: align}\"><a href ng-click=\"selectPage(page + 1)\">{{getText('next')}}</a></li>\n" + "</ul>");
}]);// angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {// $templateCache.put("template/pagination/pagination.html",// "<div>\n"+// "<div class=\"edit\"><span class=\"total-page\" ng-show=\"editPage\"> 共{{totalPages}}页 共{{totalItems}}条 </span><span class=\"page-edit\" ng-show=\"editPage\">第 "+// "<input type=\"text\" ng-model=\"currentPage\" ng-change=\"selectPage(currentPage=checkPage(1,totalPages,currentPage))\""+// "requied class=\"table-counts-text\"/> 页</span><span class=\"page-size-edit\" ng-show=\"pageSizes\"> 每页 \n"+// "<select ng-model=\"itemsPerPage\" class=\"table-counts-select\"\n"+// "ng-options=\"count as count for count in pageSizes\">\n"+// "</select> 条</span>\n"+// "</div>\n"+// "<ul class=\"pagination\">\n" +// " <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(1)\">{{getText('first')}}</a></li>\n" +// " <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(page - 1)\">{{getText('previous')}}</a></li>\n" +// " <li ng-if=\"page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16\" "+// "ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\">"+// "<a ng-if=\"page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16\" href ng-click=\"selectPage(page.number)\">{{page.text}}</a>"+// "<span ng-if=\"page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16\">....</span></li>\n" +// " <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(page + 1)\">{{getText('next')}}</a></li>\n" +// " <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(totalPages)\">{{getText('last')}}</a></li>\n" +// "</ul></div>");// }]);angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/pagination/pagination.html", "<div class='row'><div class='col-sm-4 hidden-xs'>跳至 <input type='number' id='paginationNum' class='input-sm form-control inline v-middle text-center' style='width: 50px' ng-model='currentPage' ng-pattern='/^[0-9]+$/' ng-change='selectPage(currentPage=checkPage(1,totalPages,currentPage))' requied> 页，每页显示<select class='form-control input-sm' style='width: 100px;display: inline-block' ng-model='itemsPerPage' ng-options='count as count for count in pageSizes'></select>条</div><div class='col-sm-4 text-center'><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>总共{{totalItems}}条记录</small><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>/共{{totalPages}}页</small></div><div class='col-sm-4 text-right text-center-xs'><ul class='pagination m-t-none m-b-none'><li ng-if='boundaryLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(1)'><i class='fa fa-chevron-left'></i>{{getText('first')}}</a></li><li ng-if='directionLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(page - 1)'>{{getText('previous')}}</a></li><li ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16' ng-repeat='page in pages track by $index' ng-class='{active: page.active}'><a href ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16' ng-click='selectPage(page.number)'>{{page.text}}</a><span ng-if='page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16'>....</span></li><li ng-if='directionLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(page + 1)'>{{getText('next')}}</a></li><li ng-if='boundaryLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(totalPages)'><i class='fa fa-chevron-right'></i>{{getText('last')}}</a></li></ul></div></div>");
}]);登入後複製
#
以上是angular分頁插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
1 個月前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
crystaldiskmark是什麼軟體？ -crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具，可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具，用於評估機械硬碟和固態硬碟（SSD）的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序，並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面，並被廣泛用於硬體評
PyCharm新手指南：全面了解外掛程式安裝！
Feb 25, 2024 pm 11:57 PM
PyCharm是一款功能強大且受歡迎的Python整合開發環境（IDE），提供了豐富的功能和工具，讓開發者可以更有效率地編寫程式碼。而PyCharm的插件機制更是其功能擴充的利器，透過安裝不同的插件，可以為PyCharm增加各種功能和客製化的特性。因此，對於PyCharm新手來說，了解並熟練安裝插件是至關重要的。本文將為你詳細介紹PyCharm插件安裝的全
foobar2000怎麼下載？ -foobar2000怎麼使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能隨時收聽音樂資源的軟體，各種音樂無損音質帶給你，增強版本的音樂播放器，讓你得到更全更舒適的音樂體驗，它的設計理念是將電腦端的高級音頻播放器移植到手機上，提供更便捷高效的音樂播放體驗，介面設計簡潔明了易於使用它採用了極簡的設計風格，沒有過多的裝飾和繁瑣的操作能夠快速上手，同時還支持多種皮膚和主題，根據自己的喜好進行個性化設置，打造專屬的音樂播放器支援多種音訊格式的播放，它還支援音訊增益功能根據自己的聽力情況調整音量大小，避免過大的音量對聽力造成損害。接下來就讓小編為大
百度網盤app怎麼用
Mar 27, 2024 pm 06:46 PM
在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一，憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗，贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料，還是在線上觀看影片、聽取音樂，百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解，那麼這篇教學就將為大家詳細介紹百度網盤app如何使用，還有疑惑的用戶們就快來跟著本文詳細了解一下吧！百度雲網盤怎麼用：一、安裝首先，下載並安裝百度雲軟體時，請選擇自訂安裝選
網易信箱大師怎麼用
Mar 27, 2024 pm 05:32 PM
網易郵箱，作為中國網友廣泛使用的一種電子郵箱，一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師，則是專為手機使用者打造的信箱軟體，它大大簡化了郵件的收發流程，讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用，具體又有哪些功能呢，下文中本站小編將為大家帶來詳細的內容介紹，希望能幫助到大家！首先，您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”，然後按照提示進行安裝即可。下載安裝完成後，我們打開網易郵箱帳號並進行登錄，登入介面如下圖所示
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
分享Edge瀏覽器不支援此外掛程式的三種解決方法
Mar 13, 2024 pm 04:34 PM
用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件，這該如何解決？今日小編就來給大家分享三種解決方法，快來試試看。 方法一：嘗試用其他的瀏覽器。 方法二：瀏覽器上的FlashPlayer可能過時或遺失，導致此外掛程式不受支援狀態，可在官網下載最新版本。 方法三：同時按下「Ctrl+Shift+Delete」鍵。 點選“清除資料”，重新開啟瀏覽器即可。
Chrome的插件擴充功能安裝目錄是什麼
Mar 08, 2024 am 08:55 AM
Chrome的插件擴充功能安裝目錄是什麼？正常情況下，Chrome外掛程式擴充功能的預設安裝目錄如下：1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User
