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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
react antd实现动态增减表单
Jun 03 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
无限级别菜单的实现
2006/10/09 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
js实现常用排序算法
2016/08/09 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
老生常谈js中的MVC
2017/07/25 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python内置数据类型之列表操作
2018/11/12 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
Python基于template实现字符串替换
2020/11/27 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
水果超市创业计划书
2014/01/27 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
大班亲子运动会方案
2014/06/10 职场文书
加油口号大全
2014/06/13 职场文书
五年级学生期末评语
2014/12/26 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫