Angular.js与Bootstrap相结合实现表格分页代码


Posted in Javascript onApril 12, 2016

先给大家简单介绍angular.js和bootstrap基本概念。

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页。

先上图看看最终结果:

Angular.js与Bootstrap相结合实现表格分页代码

不得不说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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 #Javascript
zTree插件下拉树使用入门教程
Apr 11 #Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 #Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 #Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 #Javascript
详解JavaScript的另类写法
Apr 11 #Javascript
详解jQuery中的empty、remove和detach
Apr 11 #Javascript
You might like
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php数组去除空值函数分享
2015/02/02 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
javascript 常用功能总结
2012/03/18 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
javascript关于继承解析
2016/05/10 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python中模块string.py详解
2017/03/12 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
考博专家推荐信模板
2013/12/02 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
公证书样本
2014/04/10 职场文书
小学教师培训方案
2014/06/09 职场文书
学校三节实施方案
2014/06/09 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
代理词怎么写
2015/05/25 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server