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

2024-10-11 09:24:04

接着第一篇《》AngularJS内建服务$location及其功能详解》，进行学习

Section 2：实现分页显示效果

那么再隐身一下，通过location的setter方法设置当前的url信息。在这里为了能够让演示看到更好的效果，在这个比较完整的实例中，我引入了angularJS的多路由技术、嵌套的控制器之间传递数据、scope的继承、 http通信、内链接传递变量等。

首先建立一个首页模板

<!DOCTYPE html>
<html ng-app="turnPageApp">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="lib/angular.js"></script>
  <script src="lib/angular-route.min.js"></script>
  <style type="text/css">
    .turnPageButtonArea {
      background-color: #f07a13;
      width: 500px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 10px auto;
      padding: 20px;
    }

    button {
      margin-right: 20px;
      width: 100px;
      height: 30px;
      font-size: 15px;
    }

    .pageNum {
      width: 50px;
      height: 23px;
      text-align: center;
    }

    body {
      font-family: 微软雅黑;
    }

    h1 {
      text-align: center;
    }

    .totalPages {
      color: #ffffff
    }
  </style>
</head>
<body ng-controller="indexController">
<h1>AngularJS TurnPage By $location Service</h1>

<div ng-view></div>
<div class="turnPageButtonArea">
  <button ng-click="previous()">Previous</button>
  <button ng-click="next()">Next</button>
  <input type="number" ng-model="currentPage" class="pageNum">
  <button ng-click="goToPage()">Go</button>
  <span class="totalPages">共 {{allPage}} 页</span>
</div>
</body>
</html>

通过一些简单的CSS样式将页面的布局修饰了一下。

然后在首页的元素里设置了一些ngApp和controller。

在属性为ngView的div元素中，将嵌入其他HTML的模板。

紧接着下方，我摆放了三个按钮，其中前两个是上一页和下一页的翻页按钮；一个输入框可供用户输入他想跳转到的页码，旁边的按钮作为页码的提交按钮，点击后页面立即翻页。

这三个按钮里面都有一个ngClick属性，表示当用户点击按钮后，便会执行对应的函数。

在讲解angularJS的js代码前，先截图看看文件的目录结构。

上面的index.html是之前两个例子的，可以不去理会。

为了简单期间，我把script脚本都放在了turnPage.html文件的下方了。下面就是全这个文件的完整代码：

turnPage.html

<!DOCTYPE html>
<html ng-app="turnPageApp">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="lib/angular.js"></script>
  <script src="lib/angular-route.min.js"></script>
  <style type="text/css">
    .turnPageButtonArea {
      background-color: #f07a13;
      width: 500px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 10px auto;
      padding: 20px;
    }

    button {
      margin-right: 20px;
      width: 100px;
      height: 30px;
      font-size: 15px;
    }

    .pageNum {
      width: 50px;
      height: 23px;
      text-align: center;
    }

    body {
      font-family: 微软雅黑;
    }

    h1 {
      text-align: center;
    }

    .totalPages {
      color: #ffffff
    }
  </style>
</head>
<body ng-controller="indexController">
<h1>AngularJS TurnPage By $location Service</h1>

<div ng-view></div>
<div class="turnPageButtonArea">
  <button ng-click="previous()">Previous</button>
  <button ng-click="next()">Next</button>
  <input type="number" ng-model="currentPage" class="pageNum">
  <button ng-click="goToPage()">Go</button>
  <span class="totalPages">共 {{allPage}} 页</span>
</div>
<script>
  //实例化用户自己的ngApp对象。这里因为用到了路由机制，所以在依赖注入中写入ngRoute这个模块
  var turnPageApp = angular.module('turnPageApp', ['ngRoute']);
  /*
   设置对于不同的url，启用不同的模板和控制器。
   本例由于只用到了一个模板，所以遇到的路由的情况就只有一种，即 “/id”
   */
  turnPageApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/:id', { //这里的id其实表示的是翻页中的页码
          templateUrl: 'view/student.html',
          controller: 'StudentController'
        })
        .otherwise({redirectTo: '/1'});//如果没法匹配到url时，直接跳转会第一页
  }]);
  //注册父控制器indexController，这里由于需要将模板里的子控制器的值传递给父控制器，所以需要这个根域$rootScope来帮忙，在返回函数里需要传入这个根域对象。
  //而且，本例是基于对url的操作来实现翻页，所以这个内建的$location服务是一定要传入的
  turnPageApp.controller('indexController', function ($rootScope, $scope, $location) {
    //给父scope定义函数
    $scope.previous = function () {
      //从浏览器的地址栏获取路径，即turnPage.html#/1中井号后面的内容：“ /1 ”
      //然后通过JavaScript的silce函数取出斜杠后面的字符，并转换成数字。
      //加 1 还是减 1 要看是在定义的是哪个按钮的功能函数了
      var pageNum = parseInt($location.path().slice(1)) - 1;
      //页码是有限的，需要做一些判断
      if (pageNum < 1) {
        alert('This is the first page');
      } else {
        //如果现在没有处在第一页，则path属性减去1，即向前翻一页。这个翻页的效果就是通过设置url中的path来实现
        $location.path(pageNum);
      }
    };
    //和上面的previous（）函数类似
    $scope.next = function () {
      var pageNum = parseInt($location.path().slice(1)) + 1;
      if (pageNum > $rootScope.allPage) {
        alert('This is the last page');
      } else {
        $location.path(pageNum);
      }
    };
    //这是一个直接跳转到那个页码的函数，在判断的地方稍微繁琐些
    $scope.goToPage = function () {
      //从input输入框绑定的currentPage变量中获取用户输入的值
      var pageNum = $scope.currentPage;
      //为了程序的严密和可用性，需要先判断输入是否为空
      if (pageNum == null || pageNum == undefined || pageNum == "") {
        alert("try to input a page number");
        //如果不是空，再判断用户输入的页码是否超出了页码的范围
        //这里出现了$rootScope这个根域及其属性allPage，该属性的值是页码的总数
      } else if (!(pageNum >= 1 && pageNum <= $rootScope.allPage)) {
        alert("The page number is beyond the scope of the number of the students")
      } else {
        //如果都没问题了，则修改URL，此时angularJS会捕捉地址栏的变化，然后跳转，细节将在下面讲解。
        $location.path(pageNum);
      }
    };
  });
  //这里实在注册嵌入到首页的模板页的控制器。
  //由于子域和父域的通信需要借助根域，所以在依赖中传入$rootScope对象
  //$scope是模板自己的作用域，它继承了父控制器indexController生成的作用域
  //在模板中需要与服务端的文件进行交互，所以需要引入内建的$http服务。为了控制实例的复杂度，我直接写了一个json文件，做了一些假数据。
  //这里$routeParams是一个对象，这个对象里有一个属性，就是我们之前在config（）函数里看到的那个id（/:id），这个id是个变量，地址栏里的path是几，这个id就是几。id的值需要通过$routeParams这个对象来取得。
  turnPageApp.controller('StudentController', ['$rootScope', '$scope', '$http', '$routeParams', function ($rootScope, $scope, $http, $routeParams) {
    //$http的get方法与远程的一个文件发出请求，如果成功，则执行一个回调函数，函数的参数就是从远端文件里拿到的数据，这个数据可以是个数组，也可以是个对象。
    //那么我们这次拿到的是一个json数组，数组的元素是一个个的对象。
    $http.get('data/students.json').success(function (data) {
      //把数组里的一个元素取出来，赋给模板子作用域对象的属性上。由于json数组的id是从1开始写的，而返回的数据是个数组，下标从0开始，所以要减去1
      $scope.student = data[$routeParams.id - 1];
      //这里顺便把这个数组的元素个数取出来，每个元素就代表以页。那么元素总个数就代表共有多少页。
      //注意要传递给最高级别的根域对象，因为子域能覆写父域的同名属性；子域如果没有直接赋值，那么子域的同名属性将继承父域同名属性的值；
      /*我们在回到本文件代码上面的“共 {{allPage}} 页”处，这个就是根域$rootScope的属性。而且在父控制器中并没有特别的赋值。而这个span元素恰好就在父控制器的作用域内，那么这个元素里的allPage属性就会继承父作用域的同名属性allPage的值，也就间接的显示出了总页数。
      */
      $rootScope.allPage = data.length;
    });
  }]);
</script>
</body>
</html>

view/student.html

<table cellspacing="0">
  <tr>
    <td class="title">ID</td>
    <td>{{student.id}}</td>
  </tr>
  <tr>
    <td class="title">Name</td>
    <td>{{student.name}}</td>
  </tr>
  <tr>
    <td class="title">Sex</td>
    <td>{{student.sex}}</td>
  </tr>
  <tr>
    <td class="title">Age</td>
    <td>{{student.age}}</td>
  </tr>
  <tr>
    <td class="title">Courses</td>
    <td>
      <ul>
        <li ng-repeat="course in student.courses">{{course}}</li>
      </ul>
    </td>
  </tr>
</table>
<style type="text/css">
  table {
    border: solid 1px #000000;
    margin: 0px auto;
  }

  td {
    padding: 10px 10px 10px 20px;
    margin: 0px;
    border: solid 1px #000000;
  }

  tr {
    margin: 0px;
    padding: 0px;

  }

  .title {
    background-color: #207ef0;
    text-align: center;
    color: #ffffff;
  }

  ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
  }

  li {
    float: left;
    margin: 10px;
  }
</style>

data/students.json

[
 {
  "id": 1,
  "name": "Frank Li",
  "sex": "male",
  "age": "30",
  "courses": [
   "HTML",
   "CSS",
   "Javascript",
   "Java",
   "PHP",
   "MySQL",
   "Ubuntu",
   "MongoDB",
   "NodeJS",
   "AngularJS",
   "Photoshop",
   "LESS",
   "Bootstrap"
  ]
 },
 {
  "id": 2,
  "name": "Cherry",
  "sex": "female",
  "age": "27",
  "courses": [
   "Anderson's Fairy Tales",
   "Pride and Prejudice",
   "Vanity Fair",
   "Oliver Twist"
  ]
 },
 {
  "id": 3,
  "name": "John Liu",
  "sex": "male",
  "age": "29",
  "courses": [
   "iology and medical science",
   "pplied biology",
   "medicine",
   "cell biology"
  ]
 },
 {
  "id": 4,
  "name": "Lucy Mu",
  "sex": "female",
  "age": "22",
  "courses": [
   "Introduction to ART ",
   "sketch",
   "Composition",
   "sculpture"
  ]
 }
]

这是刚开始的样子，地址栏中默认的path是/1，所以直接显示了第一个学生的信息。页码总数也能获得。

点击了Previous按钮后的效果。不能再往前翻页了

处于第4页时，点击Next按钮时的效果。不能再往后翻页了。

在页码范围内翻页是没有问题的！

鉴于篇幅，我就不演示输入的页码超出范围的情况了。上面的截图是输入正确范围的页码，点击Go按钮的效果。

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

angular.js分页代码的实例

对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入标签即可调用. 先来看下效果图实例代码 app.directive('pagePagination', function(){ return { rest
学习Angularjs分页指令

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

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

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

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

今天我们来看看一种只实现分页没有查询的例子吧,先看效果: 采用了Angular-UI中的分页组件,关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节(其中ui-router等我也建议你多看看) 注意:必须按照官网上引入相应的js和css才能生效,千万不要忘记了. HTML代码如下: <div class=""> <table class="table"&
AngularJS 与Bootstrap实现表格分页实例代码

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

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

angularJs 的分页重点体现在对过滤器的使用.这个过滤器也并不复杂. 首先上 html 代码: <!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-"> <meta name="viewport" content="width=device-width"> <title&g
Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

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

相关推荐

随机推荐