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

JavaScript 2019-01-05

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

Section 2：

实现分页显示效果

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

首先建立一个首页模板

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html ng-app="turnPageApp">
<head lang="en">
<Meta charset="UTF-8">

AngularJS TurnPage By $location Service
IoUs()">PrevIoUs

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

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

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

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

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

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

这里写图片描述

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

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

turnPage.html

rush:xhtml;"> Meta charset="UTF-8"> AngularJS TurnPage By $location Service
IoUs()">PrevIoUs

view/student.html

<div class="jb51code">
<pre class="brush:xhtml;">
<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>

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;
}

data/students.json

<div class="jb51code">
<pre class="brush:js;">
[
{
"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","age": "29","courses": [
"iology and medical science","pplied biology","medicine","cell biology"
]
},{
"id": 4,"name": "Lucy Mu","age": "22","courses": [
"Introduction to ART ","sketch","Composition","sculpture"
]
}
]

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

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

分页分页

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...