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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
前端jquery部分很精彩
May 03 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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 数组入门教程小结
2009/05/20 PHP
php header功能的使用
2013/10/28 PHP
php进程间通讯实例分析
2016/07/11 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python递归全排列实现方法
2018/08/18 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
py-charm延长试用期限实例
2019/12/22 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
最新大学职业规划书范文
2013/12/30 职场文书
优秀学生事迹材料
2014/02/08 职场文书
安全生产月演讲稿
2014/05/09 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
乌镇导游词
2015/02/02 职场文书
兴趣班停课通知
2015/04/24 职场文书
2016大一新生军训感言
2015/12/08 职场文书