Angular.js与Bootstrap相结合实现表格分页代码_AngularJS_脚本之家
脚本之家
服务器常用软件
手机版
投稿中心
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
PHP
ASP.NET
ASP
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
网络编程
脚本专栏
脚本下载
数据库
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
YUI.Ext相关
prototype
jquery
AngularJS
json
lib_js
js面向对象
extjs
Mootools
Seajs
dojo
vue.js
backbone.js
React
其它
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs bootstrap 实现分页
Angular.js与Bootstrap相结合实现表格分页代码
更新时间：2016年04月12日 10:50:11 投稿：mrr
最近一直在学习angularjs相关知识，在学习过程中写了一个小demo，下面把代码思路分享给大家，感兴趣的朋友一起学习
先给大家简单介绍angular.js和bootstrap基本概念。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。
先上图看看最终结果：
不得不说Angular.js代码风格很受人欢迎，几十行代码清晰简洁的实现了上面的功能。
首先表格的数据源来自于，Server.js 点击下载。通过get取数后分页显示。
1.表格是通过ng-repeat来展示的，代码如下：
<table class="table table-bordered">
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>
$index是repeat的默认参数。表格的列头是通过数据源（json）的第一行循环取的key值。当然要是Bootstrap要指定table的Class是table table-bordered。
2.分页是也是用ng-repeat，不得不说ng-repeat是常用指令。
分页代码如下：
<nav>
<ul class="pagination">
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()">
<span>下一页</span>
</a>
</li>
</ul>
</nav>
这里用了ng-click事件指令。还用到ng-class指令
ng-class="{active: isActivePage(page)}"
上面的代码是为了分页选中的样式。
这个表格加分页是假分页，从后端取一次数据，通过不同的分页显示json的筛选数据。
具体代码+注释：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
</head>
<body>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
#divMain {
width: 500px;
margin: 0 auto;
margin-top: 100px;
nav {
position: relative;
width:100%;
height: 50px;
.pagination {
right: 0px;
position: absolute;
top: -30px;
nav li {
cursor: pointer;
</style>
<div id="divMain" ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered">
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>
<nav>
<ul class="pagination">
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()">
<span>下一页</span>
</a>
</li>
</ul>
</nav>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$http.get("Service.js").then(function (response) {
//数据源
$scope.data = response.data.records;
//分页总数
$scope.pageSize = 5;
$scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
$scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
$scope.pageList = [];
$scope.selPage = 1;
//设置表格数据源(分页)
$scope.setData = function () {
$scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通过当前页数筛选出表格当前显示数据
$scope.items = $scope.data.slice(0, $scope.pageSize);
//分页要repeat的数组
for (var i = 0; i < $scope.newPages; i++) {
$scope.pageList.push(i + 1);
//打印当前选中页索引
$scope.selectPage = function (page) {
//不能小于1大于最大
if (page < 1 || page > $scope.pages) return;
//最多显示分页数5
if (page > 2) {
//因为只显示5个页数，大于2页开始分页转换
var newpageList = [];
for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {
newpageList.push(i + 1);
$scope.pageList = newpageList;
$scope.selPage = page;
$scope.setData();
$scope.isActivePage(page);
console.log("选择的页：" + page);
};
//设置当前选中页样式
$scope.isActivePage = function (page) {
return $scope.selPage == page;
};
//上一页
$scope.Previous = function () {
$scope.selectPage($scope.selPage - 1);
//下一页
$scope.Next = function () {
$scope.selectPage($scope.selPage + 1);
};
});
})
</script>
</body>
</html>
关于Angular.js与Bootstrap相结合实现表格分页代码小编就给大家介绍这么多，希望对大家有所帮助！
您可能感兴趣的文章:纯javascript实现分页(两种方法)非常不错的一个JS分页效果代码，值得研究利用js制作html table分页示例(js实现分页)纯js分页代码(简洁实用)jsp分页显示的实现代码js分页显示div的内容JS实现的简单分页功能示例JSP分页显示的实例代码js控制分页打印、打印分页示例JS实现前端分页效果
angularjs
bootstrap
分页
相关文章
Angular.js之作用域scope''@'',''='',''&''实例详解这篇文章主要介绍了Angular.js之作用域scope'@','=','&'实例详解,需要的朋友可以参考下 2017-02-02
浅析AngularJs HTTP响应拦截器这篇文章主要介绍了浅析AngularJs HTTP响应拦截器的相关资料,需要的朋友可以参考下 2015-12-12
Angular指令之restict匹配模式的详解这篇文章主要介绍了Angular指令之restict匹配模式的详解的相关资料,这里对Angularjs 中restict匹配模式进行详解并列举了四种模式进行比较，需要的朋友可以参考下 2017-07-07
Angular 2父子组件数据传递之@Input和@Output详解 (上)这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。 2017-07-07
webapp框架AngularUI的demo改造之路这篇文章主要介绍了webapp框架AngularUI的demo改造之路,需要的朋友可以参考下 2014-12-12
AngularJS入门教程之REST和定制服务详解本文主要讲解 AngularJS REST和定制服务的知识，这里帮大家整理了相关知识，并附示例代码，详细讲解了RES和定制服务的知识，有兴趣的小伙伴可以参考下 2016-08-08
使用AngularJS制作一个简单的RSS阅读器的教程这篇文章主要介绍了使用Angular.js制作一个简单的RSS阅读器的教程,AngularJS是一个非常有人气的JavaScript库,文中介绍的制作方法主要使用到了FreedReadR模版,需要的朋友可以参考下 2015-06-06
如何利用@angular/cli V6.0直接开发PWA应用详解这篇文章主要给大家介绍了如何利用@angular/cli V6.0直接开发PWA应用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用@angular/cli V6.0具有一定的参考学习价值，需要的朋友可以参考下 2018-05-05
Angular2管道Pipe及自定义管道格式数据用法实例分析这篇文章主要介绍了Angular2管道Pipe及自定义管道格式数据用法,结合实例形式详细分析了Angular2管道与纯管道相关概念、语法及使用技巧,需要的朋友可以参考下 2017-11-11
对angular 监控数据模型变化的事件方法$watch详解今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$watch详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10
最新评论
大家感兴趣的内容
1angular.foreach 循环方法使用指南2学习AngularJs:Directive指令用法（完整版）3angularJS中$apply()方法详解4angular.element方法汇总5AngularJS 日期格式化详解6angularjs指令中的compile与link函数详解7AngularJS内置指令8jQuery和AngularJS的区别浅析9AngularJS实现元素显示和隐藏的几个案例10AngularJs根据访问的页面动态加载Controller
最近更新的内容
AngularJs concepts详解及示例代码Angular.js项目中使用gulp实现自动化构建以及压缩打包详解详解Angularjs中的依赖注入AngularJS的ng-repeat指令与scope继承关系实例详解详解angularjs popup-table 弹出框表格指令在 Angular6 中使用 HTTP 请求服务端数据的步骤详解Angularjs cookie 操作实例详解angular中两种表单的区别(响应式和模板驱动表单)Angular.js之作用域scope''@'',''='',''&''实例AngularJS向后端ASP.NET API控制器上传文件
常用在线小工具
微信
投稿
脚本任务
在线工具
关注微信公众号
关于我们 -
广告合作 -
联系我们 -
免责声明 -
网站地图 -
投诉建议 -
在线投稿
CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有