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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 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中长文章分页显示实现代码
2012/09/29 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP钩子实现方法解析
2019/05/21 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
js转义字符介绍
2013/11/05 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
Babel 入门教程学习笔记
2018/06/13 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python金融数据可视化汇总
2017/11/17 Python
python实现画圆功能
2018/01/25 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python 6种方法实现单例模式
2020/12/15 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
售后专员岗位职责
2013/12/08 职场文书
读书活动实施方案
2014/03/10 职场文书
老公保证书范文
2014/04/29 职场文书