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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS支持带x身份证号码验证函数
Aug 10 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
js实现按座位号抽奖
Apr 05 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
js停止输出代码
2008/07/20 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
使用jQuery实现动态添加小广告
2017/07/11 jQuery
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python查看FTP是否能连接成功的方法
2015/07/30 Python
python if not in 多条件判断代码
2016/09/21 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Django中使用Celery的方法步骤
2020/12/07 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
信用卡工作证明模板
2014/09/14 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
2014年平安夜寄语
2014/12/08 职场文书
违纪检讨书
2015/01/27 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android