Angular.js与Bootstrap相结合实现表格分页代码_AngularJS
AngularJS 是一个 JavaScript 框架。它可通过
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页。
先上图看看最终结果:
不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能。
首先表格的数据源来自于,Server.js 点击下载。通过get取数后分页显示。
1.表格是通过ng-repeat来展示的,代码如下:
index | {{ x }} | ||
---|---|---|---|
{{ $index + 1 }} |
$index是repeat的默认参数。表格的列头是通过数据源(json)的第一行循环取的key值。当然要是Bootstrap要指定table的Class是table table-bordered。
2.分页是也是用ng-repeat,不得不说ng-repeat是常用指令。
分页代码如下:
这里用了ng-click事件指令。还用到ng-class指令
ng-class="{active: isActivePage(page)}"
上面的代码是为了分页选中的样式。
这个表格加分页是假分页,从后端取一次数据,通过不同的分页显示json的筛选数据。
具体代码+注释:
表格
index {{ x }} {{ $index + 1 }}
关于Angular.js与Bootstrap相结合实现表格分页代码小编就给大家介绍这么多,希望对大家有所帮助!
上一篇: javascript如何引用到html中
下一篇: javascript如何改变背景色
推荐阅读
-
AngularJS 与Bootstrap实现表格分页实例代码
-
Angular.js与Bootstrap相结合实现表格分页代码
-
Angular.js与Bootstrap相结合实现手风琴菜单代码
-
AngularJS与BootStrap模仿百度分页的示例代码
-
Vue Cli与BootStrap结合实现表格分页功能
-
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
-
angularjs+bootstrap实现自定义分页的实例代码
-
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
-
AngularJS 与Bootstrap实现表格分页实例代码
-
Angular.js与Bootstrap相结合实现表格分页代码