• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Angularjs分页查询的实现

Angularjs分页查询的实现

作者:zxj娟娟 字体:[增加 减小] 来源:互联网 时间:2017-05-11

zxj娟娟通过本文主要向大家介绍了angularjs实现分页,angularjs分页,angularjs 分页插件,angularjs实现登录,angularjs实现购物车等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

 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); 
</div>

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Angularjs 实现移动端在线测评效果(推荐)
  • 简单实现AngularJS轮播图效果
  • angularjs点击图片放大实现上传图片预览
  • angularjs实现多张图片上传并预览功能
  • Angularjs分页查询的实现

相关文章

  • 2017-05-11详解Vue中添加过渡效果
  • 2017-05-11详谈Angular 2+ 的表单(一)之模板驱动型表单
  • 2017-05-11Ionic+AngularJS实现登录和注册带验证功能
  • 2017-05-11jQuery实现弹出窗口弹出div层的实例代码
  • 2017-05-11Vue实现自带的过滤器实例
  • 2017-05-11xmlplus组件设计系列之路由(ViewStack)(7)
  • 2017-05-11微信小程序左滑删除效果的实现代码
  • 2017-05-11原生js实现无缝轮播图效果
  • 2017-05-11Javascript中return的使用与闭包详解
  • 2017-05-11利用Mongoose让JSON数据直接插入或更新到MongoDB

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js记录点击某个按钮的次数-刷新次数为初始状态的实例
    • 基于JavaScript实现购物车功能
    • JavaScrip基础知识入门
    • 基于canvas的二维码邀请函生成插件
    • JavaScript中for循环的几种写法与效率总结
    • JS实现HTML标签转义及反转义
    • js实现简单的网页换肤效果
    • JS中绑定事件顺序(事件冒泡与事件捕获区别)
    • 详解Node.js串行化流程控制
    • Bootstrap模态框案例解析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有