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 相关文章推荐
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
PHP 输出缓存详解
2009/06/20 PHP
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
JDO的含义
2012/11/17 面试题
求职简历中的自我评价分享
2013/12/08 职场文书
宿舍违规检讨书
2014/01/12 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
网络研修随笔感言
2014/02/17 职场文书
六一儿童节主持词
2014/03/21 职场文书
班训口号大全
2014/06/18 职场文书
支教个人总结
2015/03/04 职场文书
经费申请报告范文
2015/05/18 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers