html分页自动加载数据库,AngularJS实现分页显示数据库信息
接着第一篇《》AngularJS内建服务$location及其功能详解》,进行学习
Section 2:实现分页显示效果
那么再隐身一下,通过location的setter方法设置当前的url信息。在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术、嵌套的控制器之间传递数据、scope的继承、 http通信、内链接传递变量等。
首先建立一个首页模板
.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
}
AngularJS TurnPage By $location Service
Previous
Next
Go
共 {{allPage}} 页
通过一些简单的CSS样式将页面的布局修饰了一下。
然后在首页的元素里设置了一些ngApp和controller。
在属性为ngView的div元素中,将嵌入其他HTML的模板。
紧接着下方,我摆放了三个按钮,其中前两个是上一页和下一页的翻页按钮;一个输入框可供用户输入他想跳转到的页码,旁边的按钮作为页码的提交按钮,点击后页面立即翻页。
这三个按钮里面都有一个ngClick属性,表示当用户点击按钮后,便会执行对应的函数。
在讲解angularJS的js代码前,先截图看看文件的目录结构。
上面的index.html是之前两个例子的,可以不去理会。
为了简单期间,我把script脚本都放在了turnPage.html文件的下方了。下面就是全这个文件的完整代码:
turnPage.html
.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
}
AngularJS TurnPage By $location Service
Previous
Next
Go
共 {{allPage}} 页
//实例化用户自己的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;
});
}]);
view/student.html
ID | {{student.id}} |
Name | {{student.name}} |
Sex | {{student.sex}} |
Age | {{student.age}} |
Courses |
|
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;
}
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按钮的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html分页自动加载数据库,AngularJS实现分页显示数据库信息相关推荐
- html分页自动加载数据,硕正控件默认会自动加载数据
硕正控件 autoLoad 页面加载时是否自动加载表格数据 默认true,如果自己需要根据页面条件查询数据 建议设置为false 自己去查询加载数据. 硕正表格控件API 属性 属性的定义, 例如 ...
- html分页自动加载,AutoPagerize插件,网页自动翻页插件,自动加载分页网站
AutoPagerize,是一款可以实现网页自动翻页的浏览器插件,该插件会自动缓存下一页网页,将翻页式的内容变为瀑布流的形式,无需手动点击翻页,即可自动链接到下一页. 用于自动加载分页网页的浏览器扩展 ...
- calendar控件使用 extjs_ExtJs定制日历控件——自动加载更新(日历控件显示)
将定制的日历控件放到一个Panel里显示,其结构如下: , { border: true, id: 'page', animCollapse : true, width: 1050, height: ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- thinkphp 框架自动加载原理_ThinkPHP5分析Part 1 基本框架流程
ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的.ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能 ...
- PHP自动加载__autoload的工作机制
PHP自动加载__autoload的工作机制 PHP的懒加载lazy loading 在 2011年11月12日 那天写的 已经有 4559 次阅读了 感谢 参考或原文 服务器君一共花费了11 ...
- 大话PHP设计模式:类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...
一.类自动载入 SPL函数 (standard php librarys) 类自动载入,尽管 __autoload() 函数也能自动加载类和接口,但更建议使用 spl_autoload_registe ...
- 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据
今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...
- Servlet程序自动加载
有时候,我们希望Servlet程序,可以在启动Tomcat时随即启动,比如,当启动一个Web项目时,首先,需要对数据库信息进行初始化 此时,只需要使用web.xml文件中的<load-on-st ...
最新文章
- CentOS 6.3(x86_64)下安装Oracle 10g R2
- 2 模版_轻量html模版渲染库 cJinja
- config done shell_shell do...done $config
- 计算机硬件:内存常识知多少?内存知识盲区详解
- 图片也要查重了?期刊用AI审论文防造假,旋转/翻转/拉伸都不行
- css transition过渡
- 常用基础Linux操作命令总结与hadoop基础操作命令
- 北大OJ(POJ 2503)在线翻译
- 错误记录(10)SyntaxError: identifier starts immediately after numeric literal
- nodejs路由信息
- jq 展示数据小细节
- 个人网站建设教程|本地网站环境搭建|网站制作教程
- ctl文件去空格,word文档段落如何空格去掉 word文档段落前空格
- XMind 2022 for Mac(思维导图软件)V12.0.3中文免费版
- 专业办公套件(Office 2019)for Mac
- 微信公众号Makrdown编辑器,语法你懂吗?
- tushare获取沪深300指数历史_TuShare -财经数据接口包
- 租便宜的VPS应该注意什么?
- UEFI 、GPT 分区安装 Windows10
- 黑猴子的家:JavaWeb 之 Title icon