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中为元素加上name属性的方法
May 09 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
JavaScript中遍历的十种方法总结
Dec 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简单smarty入门程序实例
2015/06/11 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
服务器安全设置的几个注册表设置
2007/07/28 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python图像处理之反色实现方法
2015/05/30 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
详解Python中import机制
2020/09/11 Python
Python 实现微信自动回复的方法
2020/09/11 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
安全生产检讨书
2014/01/21 职场文书
公益广告宣传方案
2014/02/28 职场文书
网络妈妈观后感
2015/06/08 职场文书
勇敢的心观后感
2015/06/09 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle