Angularjs分頁查詢的實現(xiàn)

更新時間：2017年02月24日 13:53:34 作者：zxj娟娟

本文給大家分享angularjs實現(xiàn)分頁查詢功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下

angularjs實現(xiàn)分頁查詢功能的實例代碼，具體代碼如下所示：

//首頁導(dǎo)入<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ù)組 
}; 
//當(dāng)頁碼和頁面記錄數(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
淺談angularjs依賴服務(wù)注入寫法的注意點
下面小編就為大家?guī)硪黄獪\談angularjs依賴服務(wù)注入寫法的注意點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
深入理解Angular.JS中的Scope繼承
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實現(xiàn)，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-06-06
angularjs表格分頁功能詳解
本文給大家分享的是個人在項目中使用angularjs實現(xiàn)表格分頁功能的思路和代碼，非常的簡單實用，有需要的小伙伴可以參考下。
2016-01-01
Angular刷新當(dāng)前頁面的實現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Angular中$compile源碼分析
本文給大家分享的是通過angular中的$compile源碼進(jìn)行分析，從而更好的理解angular的使用，非常的不錯，希望大家能夠喜歡。
2016-01-01
AngularJS入門教程之REST和定制服務(wù)詳解
本文主要講解 AngularJS REST和定制服務(wù)的知識，這里幫大家整理了相關(guān)知識，并附示例代碼，詳細(xì)講解了RES和定制服務(wù)的知識，有興趣的小伙伴可以參考下
2016-08-08
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-07-07
在Angular中使用Renderer2的操作代碼
Renderer2 類是 Angular 提供的一個抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下
2024-03-03