Angularjs分页查询的实现

 更新时间:2017年02月24日 13:53:34   作者:zxj娟娟  
本文给大家分享angularjs实现分页查询功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下

 angularjs实现分页查询功能的实例代码,具体代码如下所示:

//首页导入<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 = { 
    //发送给后台的请求数据 
    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; //总条数 
    $scope.takeGoodsLists = response.content; //具体内容 
    //共享的数据赋值 
  }); 
} 
$scope.reSearch = reSearch; 
//配置分页基本参数 
$scope.paginationConf = { 
  currentPage: 1, //起始页 
  //totalItems:300,//总共有多少条记录 
  itemsPerPage: 5, // 每页展示的数据条数 
  //pagesLength:5,//分页条目的长度 
  perPageOptions: [5, 10, 20] //可选择显示条数的数组 
}; 
//当页码和页面记录数发生变化时监控后台查询如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。 
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reSearch); 

相关文章

  • angular2+node.js express打包部署的实战

    angular2+node.js express打包部署的实战

    本篇文章主要介绍了angular2+node.js express打包部署的实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS constant和value区别详解

    AngularJS constant和value区别详解

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢?今天小编给大家分享AngularJS constant和value区别详解,需要的朋友参考下
    2017-02-02
  • 浅谈angularjs依赖服务注入写法的注意点

    浅谈angularjs依赖服务注入写法的注意点

    下面小编就为大家带来一篇浅谈angularjs依赖服务注入写法的注意点。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 深入理解Angular.JS中的Scope继承

    深入理解Angular.JS中的Scope继承

    这篇文章主要给大家深入的介绍了关于Angular.JS中Scope继承的相关资料,Angular。JS中scope之间的继承关系使用JavaScript的原型继承方式实现,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • angularjs表格分页功能详解

    angularjs表格分页功能详解

    本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码,非常的简单实用,有需要的小伙伴可以参考下。
    2016-01-01
  • Angular刷新当前页面的实现方法

    Angular刷新当前页面的实现方法

    这篇文章主要介绍了Angular刷新当前页面的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Angular中$compile源码分析

    Angular中$compile源码分析

    本文给大家分享的是通过angular中的$compile源码进行分析,从而更好的理解angular的使用,非常的不错,希望大家能够喜欢。
    2016-01-01
  • AngularJS入门教程之REST和定制服务详解

    AngularJS入门教程之REST和定制服务详解

    本文主要讲解 AngularJS REST和定制服务的知识,这里帮大家整理了相关知识,并附示例代码,详细讲解了RES和定制服务的知识,有兴趣的小伙伴可以参考下
    2016-08-08
  • Angular 2父子组件数据传递之@ViewChild获取子组件详解

    Angular 2父子组件数据传递之@ViewChild获取子组件详解

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 在Angular中使用Renderer2的操作代码

    在Angular中使用Renderer2的操作代码

    Renderer2 类是 Angular 提供的一个抽象服务,允许在不直接操作 DOM 的情况下操纵应用程序的元素,本文给大家介绍了如何在 Angular 中使用 Renderer2,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2024-03-03

最新评论