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按钮的效果。

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

Javascript 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
几行js代码实现自适应
Feb 24 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php自动加载机制的深入分析
2013/06/08 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
javascript整除实现代码
2010/11/23 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python基于execjs运行js过程解析
2020/11/27 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
2014年度党员自我评议
2014/09/13 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2014年内勤工作总结
2014/11/24 职场文书
客户经理岗位职责
2015/01/31 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
Django实现翻页的示例代码
2021/05/24 Python