Angularjs分页查询的实现


Posted in Javascript onFebruary 24, 2017

 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);
Javascript 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
原生js 秒表实现代码
Jul 24 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 #Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
几行js代码实现自适应
Feb 24 #Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 #Javascript
JavaScript基本类型值-Number类型
Feb 24 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
实例讲解PHP表单
2020/06/10 PHP
用javascript实现画板的代码
2007/09/05 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Python中的yield浅析
2014/06/16 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
大学生村官工作感言
2014/01/10 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
承诺书模板
2014/08/30 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
校长一岗双责责任书
2015/05/09 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
nginx结合openssl实现https的方法
2021/07/25 Servers