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 类方法定义还是有点区别
Apr 15 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 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
php笔记之:AOP的应用
2013/04/24 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Android interview questions
2016/12/25 面试题
教师求职自荐信
2014/03/09 职场文书
最美护士演讲稿
2014/08/27 职场文书
思想政治表现评语
2015/01/04 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技