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 相关文章推荐
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
js获取 type=radio 值的方法
May 09 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 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中一个控制字符串输出的函数
2006/10/09 PHP
PHP date函数参数详解
2006/11/27 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
举例讲解Python中is和id的用法
2015/04/03 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
党校培训思想汇报
2013/12/30 职场文书
股权转让协议书范本
2014/04/12 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
社团活动总结模板
2014/06/30 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript