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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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
大师制作的中短波矿石收音机
2020/04/02 无线电
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
使用正则替换变量
2007/05/05 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
python time模块用法实例详解
2014/09/11 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
理解Python中的类与实例
2015/04/27 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
国际贸易求职信
2014/07/05 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
黑白记忆观后感
2015/06/18 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
MySQL基础(二)
2021/04/05 MySQL
Python中itertools库的四个函数介绍
2022/04/06 Python