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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python识别验证码的思路及解决方案
2020/09/13 Python
编写python代码实现简单抽奖器
2020/10/20 Python
css3学习心得分享
2013/08/19 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
Java程序员面试90题
2013/10/19 面试题
中职生自我鉴定范文
2013/10/03 职场文书
初中语文教学反思
2014/02/02 职场文书
实习单位鉴定评语
2014/04/26 职场文书
英语求职信范文
2014/05/23 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
公司管理建议书
2015/09/14 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL