Angularjs分頁查詢的實現(xiàn)
更新時間：2017年02月24日 13:53:34 作者：zxj娟娟
本文給大家分享angularjs實現(xiàn)分頁查詢功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下
angularjs實現(xiàn)分頁查詢功能的實例代碼，具體代碼如下所示：
//首頁導入<script type="text/javascript" src="framework/tm.pagination.js"></script>
//routerApp中注入'tm.pagination'
//html頁面上<tm-pagination conf="paginationConf"></tm-pagination>
//controller.js代碼
var reSearch = function() {
var postData = {
//發(fā)送給后臺的請求數(shù)據(jù)
currentPage: $scope.paginationConf.currentPage,
pageSize: $scope.paginationConf.itemsPerPage,
pickup: $scope.pickups,
startTime: $scope.startTime,
endTime: $scope.endTime,
minMoney: $scope.minMoney,
maxMoney: $scope.maxMoney
};
$http.post('后臺分頁接口', postData).success(function(response) {
$scope.paginationConf.totalItems = response.totalElements; //總條數(shù)
$scope.takeGoodsLists = response.content; //具體內(nèi)容
//共享的數(shù)據(jù)賦值
});
}
$scope.reSearch = reSearch;
//配置分頁基本參數(shù)
$scope.paginationConf = {
currentPage: 1, //起始頁
//totalItems:300,//總共有多少條記錄
itemsPerPage: 5, // 每頁展示的數(shù)據(jù)條數(shù)
//pagesLength:5,//分頁條目的長度
perPageOptions: [5, 10, 20] //可選擇顯示條數(shù)的數(shù)組
};
//當頁碼和頁面記錄數(shù)發(fā)生變化時監(jiān)控后臺查詢?nèi)绻裞urrentPage和itemsPerPage分開監(jiān)控的話則會觸發(fā)兩次后臺事件。
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reSearch);
相關(guān)文章
angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
AngularJS constant和value區(qū)別詳解
angularJS可以通過constant(name,value)和value(name,value)對于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下2017-02-02
下面小編就為大家?guī)硪黄獪\談angularjs依賴服務(wù)注入寫法的注意點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實現(xiàn)，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
本文給大家分享的是個人在項目中使用angularjs實現(xiàn)表格分頁功能的思路和代碼，非常的簡單實用，有需要的小伙伴可以參考下。2016-01-01
這篇文章主要介紹了Angular刷新當前頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文給大家分享的是通過angular中的$compile源碼進行分析，從而更好的理解angular的使用，非常的不錯，希望大家能夠喜歡。2016-01-01
本文主要講解 AngularJS REST和定制服務(wù)的知識，這里幫大家整理了相關(guān)知識，并附示例代碼，詳細講解了RES和定制服務(wù)的知識，有興趣的小伙伴可以參考下2016-08-08
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
Renderer2 類是 Angular 提供的一個抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-03-03