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 非图片动态loading效果实现代码
Apr 09 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
angularjs基础教程
Dec 25 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
Vue 实现输入框新增搜索历史记录功能
Oct 15 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获取字符串的编码格式的方法(函数)
2013/06/21 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
php数组遍历类与用法示例
2019/05/24 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Angularjs的启动过程分析
2017/07/18 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python将字母转化为数字实例方法
2019/10/04 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
年度考核自我评价
2014/01/25 职场文书
说明书格式及范文
2014/05/07 职场文书
护理见习报告范文
2014/11/03 职场文书
小学英语教学反思范文
2016/02/15 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫