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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
javascript RegExp 使用说明
May 21 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
react基本安装与测试示例
Apr 27 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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 escape URL编码
2008/12/10 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python补齐字符串长度的实例
2018/11/15 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
高中学生干部学习的自我评价
2014/02/21 职场文书
同学聚会主持词
2014/03/18 职场文书
党员演讲稿
2014/09/04 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python