angularjs实现分页和搜索功能


Posted in Javascript onJanuary 03, 2018

本文实例为大家分享了angularjs实现分页和搜索展示的具体代码,供大家参考,具体内容如下

话不多说,上代码

<html class="no-js" ng-app="myApp"> 
<body ng-controller="mainController"> 
<table class="am-table am-table-striped am-table-hover table-main"> 
<thead> 
<tr> 
<th>name</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="item in houses | limitTo:listsPerPage"> 
<td>{{item.c}}</td> 
</tr> 
</tbody> 
</table> 
<div class="am-cf"> 
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页 
<div class="am-fr"> 
<ul class="am-pagination"> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="prevPage()">«</a></li> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="nextPage()">»</a></li> 
</ul> 
</div> 
</div> 
<script src="plugins/angularjs/angular.min.js" type="text/javascript"></script> 
</body> 
</html>

javascript

<script> 
var app = angular.module("myApp", []); 
app.controller("mainController", function ($scope, $http) { 
  //测试数据 
  var $data = {"fs":[{"c":"张一"},{"c":"张二"},{"c":"张三"},{"c":"张四"},{"c":"李一"},{"c":"李二"},{"c":"李三"},{"c":"李四"},{"c":"王一"},{"c":"王二"},{"c":"王三"},{"c":"王四"}]}; 
  $scope.currentPage = 0;//设置当前页是 0 
  $scope.listsPerPage = 3;//设置每页显示3个 
  //上一页 
  $scope.prevPage = function(){ 
    if($scope.currentPage > 0){ 
      $scope.currentPage--; 
    } 
  } 
  //下一页 
  $scope.nextPage = function(){ 
    if ($scope.currentPage < $scope.pages-1){ 
      $scope.currentPage++; 
    } 
  } 
  //监听搜索条件 
  $scope.$watch('search.c', function(){ 
    $scope.currentPage = 0; 
    searchResult(); 
  }); 
  //监听翻页 
  $scope.$watch('currentPage', function(){ 
    searchResult(); 
  }); 
  //搜索或翻页结果 
  function searchResult(){ 
    var out = []; 
    if($scope.search){ 
      angular.forEach($data.fs,function(k,v){ 
        if(k.c.indexOf($scope.search.c)>-1){ 
          out.push(k); 
        } 
      }); 
    } 
    else{ 
      out = $data.fs; 
    } 
    $scope.houses = out.slice($scope.currentPage*$scope.listsPerPage); 
    $scope.dataNum = out.length; 
    $scope.pages = Math.ceil($scope.dataNum/$scope.listsPerPage); 
  } 
}); 
 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
js资料prototype 属性
Mar 13 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
原生JS运动实现轮播图
Jan 02 Javascript
vue引入ueditor及node后台配置详解
Jan 03 #Javascript
Node.js搭建小程序后台服务
Jan 03 #Javascript
基于js文件加载优化(详解)
Jan 03 #Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
js 取消页面可以选中文字的功能方法
Jan 02 #Javascript
js阻止默认右键的下拉菜单方法
Jan 02 #Javascript
webpack实用小功能介绍
Jan 02 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python实现多人聊天室
2020/03/31 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
个人自我鉴定写法
2013/11/30 职场文书
喝酒检查书范文
2014/02/23 职场文书
本科毕业生自荐信
2014/06/02 职场文书
高中同学会活动方案
2014/08/14 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS