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中的相等与不等运算
Apr 25 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jQuery的ready方法详解
Nov 27 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
Vue组件开发初探
2017/02/14 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python requests模块session代码实例
2020/04/14 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python 读取位于包中的数据文件
2020/08/07 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
摄影助理岗位职责
2014/02/07 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL