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获取form表单值的代码
Jul 17 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
js实现倒计时关键代码
May 05 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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+MySQL删除操作实例
2015/01/21 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python之时间和日期使用小结
2019/02/14 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
如何使用python进行pdf文件分割
2019/11/11 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
质量保证书格式
2015/02/27 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
培训计划通知
2015/07/15 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
详解Vue router路由
2021/11/20 Vue.js
SQL Server中锁的用法
2022/05/20 SQL Server