首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 01, 2016

接着第一篇《》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代码前，先截图看看文件的目录结构。

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

上面的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"
  ]
 }
]

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

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

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

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

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

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

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

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

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

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

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

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

- Author -

lp_frank

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
学习Angularjs分页指令
Jul 01 #Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 #Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 #Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 #Javascript
AngularJS优雅的自定义指令
Jul 01 #Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 #Javascript
CompletableFuture(1) ForkJoin(1) format(1) JAVA(88) 对齐打印(1) 异步回调(1) Springboot-cli(1) FutureTask(3) 底部导航(1) 主题(1)
You might like
php实现的常见排序算法汇总
2014/09/08 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
Laravel jwt 多表（多用户端）验证隔离的实现
2019/12/18 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
javascript学习笔记（六）数据类型和JSON格式
2014/10/08 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python3实现猜数字游戏
2020/12/07 Python
python写入文件自动换行问题的方法
2019/07/05 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
简单的命令查看安装的python版本号
2020/08/28 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
英国团购网站：Groupon英国
2017/11/28 全球购物
Linux操作面试题
2015/02/11 面试题
敬老文明号事迹材料
2014/01/16 职场文书
护理中职生求职信范文
2014/02/24 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
大连导游词
2015/02/12 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
普希金诗歌赏析（6首）
2019/08/22 职场文书