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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
vuex中使用对象展开运算符的示例
Sep 25 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python书单 不将就
2017/07/11 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Python常用外部指令执行代码实例
2020/11/05 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
团员年度个人总结
2015/02/26 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android