angularjs实现分页和搜索功能

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • angularjs表格分页功能详解
  • ANGULARJS中使用JQUERY分页控件
  • angularjs实现的前端分页控件示例
  • AngularJS实现分页显示数据库信息
  • 基于Angularjs实现分页功能
  • 学习Angularjs分页指令
  • AngularJS 与Bootstrap实现表格分页实例代码
  • Angularjs分页查询的实现
  • Angularjs 实现分页功能及示例代码
  • 详解angularjs结合pagination插件实现分页功能
赞 (0)

相关推荐

  • AngularJS实现分页显示数据库信息

    AngularJS实现分页显示数据库信息

    接着第一篇<>AngularJS内建服务$location及其功能详解>,进行学习 Section 2:实现分页显示效果 那么再隐身一下,通过location的setter方法设置当前的url信息.在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术.嵌套的控制器之间传递数据.scope的继承. http通信.内链接传递变量等. 首先建立一个首页模板 <!DOCTYPE html> <html ng-app="tu

  • angularjs表格分页功能详解

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""

  • ANGULARJS中使用JQUERY分页控件

    ANGULARJS中使用JQUERY分页控件

    首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控

  • angularjs实现的前端分页控件示例

    angularjs实现的前端分页控件示例

    前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件 实现效果图: (效果图是加上了bootstrap的css文件) 用法: angular-pagination.js代码: /** * angularjs分页控件 * Created by CHEN on 2016/11/1. */ angular.module('myModule', []).directive('myPagination',

  • 详解angularjs结合pagination插件实现分页功能

    angularjs与pagination插件可以完美实现前端的分页,筛选,搜索等功能,前提当然需要有后台开发配合,今天我们只说前端实现: 1.引入pagination插件,在angularjs引入之前先加载pagination插件: 2.在定义controller的时候,需要注入pagination插件: 3.分页前端原理基本需要有个默认异步请求,当点击分页,再次请求数据并向后台发送当前页码,如果有搜索数据或者筛选数据功能,在发送请求的同时需要带上与后台开发共同定义的搜索参数: 4.废话不多上,

  • Angularjs分页查询的实现

    angularjs实现分页查询功能的实例代码,具体代码如下所示: //首页导入<script type="text/javascript" src="framework/tm.pagination.js"></script> //routerApp中注入'tm.pagination' //html页面上<tm-pagination conf="paginationConf"></tm-pagination

  • 学习Angularjs分页指令

    学习Angularjs分页指令

    在项目中许多页面都用到了分页,然后每个页面都有许多重复的分页代码,于是自己写了一份简易的分页指令,简化页面的代码,且容易维护,写在博客中当做备份,方便以后查阅. 以下是定义指令及其应用的步骤: 1.指令定义 定义一个js文件,page-directive.js,用来写分页的指令代码,这个文件中包含了分页的模板,以下是js文件中的所有代码: 'use strict'; (function () { angular.module('template/pageInit/pageInit.html',

  • 基于Angularjs实现分页功能

    基于Angularjs实现分页功能

    前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要基于angular direct

  • AngularJS 与Bootstrap实现表格分页实例代码

    AngularJS 与Bootstrap实现表格分页实例代码

    AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS  Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后

  • Angularjs 实现分页功能及示例代码

    Angularjs 实现分页功能及示例代码

    基于Angularjs实现分页 前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要

随机推荐