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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
bootstrap表单示例代码分享
May 18 Javascript
JS实现商品筛选功能
Aug 19 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python实现选择排序
2017/06/04 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
幼儿教师考核制度
2014/01/25 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
Java SSM配置文件案例详解
2021/08/30 Java/Android
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
基于Python实现对比Exce的工具
2022/04/07 Python