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 相关文章推荐
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
怎样在php中使用PDF文档功能
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
Three.js快速入门教程
2016/09/09 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
python中zip()方法应用实例分析
2016/04/16 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
职工趣味运动会方案
2014/02/10 职场文书
家电业务员岗位职责
2014/03/10 职场文书
文化产业实施方案
2014/06/07 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android