这篇文章主要介绍了AngularJS 与Bootstrap实现表格分页的相关资料,并附实例代码和实现效果图，需要的朋友可以参考下
AngularJS 从开始发布到现在使用的开发的者越来越多，也表明大多数做前端的朋友在往这边转，毕竟是Google 公司出品的产品啊，所以最近自己也在学习这部分知识。
AngularJS Bootstrap实现表格分页：
最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。
先上图看看最终结果：
不得不说Angular.js代码风格很受人欢迎，几十行代码清晰简洁的实现了上面的功能。
首先表格的数据源来自于，Server.js 点击下载。通过get取数后分页显示。
1.表格是通过ng-repeat来展示的，代码如下：
<table class="table table-bordered"> <tr> <th>index</th><th>{{ x }}</th></tr><tr> <td>{{ $index + 1 }}</td><td></td><td></td><td></td></tr></table>
$index是repeat的默认参数。表格的列头是通过数据源（json）的第一行循环取的key值。当然要是Bootstrap要指定table的Class是table table-bordered。
2.分页是也是用ng-repeat，不得不说ng-repeat是常用指令。分页代码如下：
<nav> <ul class="pagination"> <li> <span>上一页</span></li><li> {{ page }}</li><li> <span>下一页</span></li></ul></nav>
这里用了ng-clic来源gaodai$ma#com搞$代*码网k事件指令。还用到ng-class指令
ng-class=”{active: isActivePage(page)}”
上面的代码是为了分页选中的样式。
这个表格加分页是假分页，从后端取一次数据，通过不同的分页显示json的筛选数据。
具体代码+注释：
<!-- 新 Bootstrap 核心 CSS 文件 --> #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; } <div id="divMain"> <table class="table table-bordered"> <tr> <th>index</th><th>{{ x }}</th></tr><tr> <td>{{ $index + 1 }}</td><td></td><td></td><td></td></tr></table><nav> <ul class="pagination"> <li> <span>上一页</span></li><li> {{ page }}</li><li> <span>下一页</span></li></ul></nav></div>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
以上就是AngularJS 与Bootstrap实现表格分页实例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：AngularJS 与Bootstrap实现表格分页实例代码
转载请注明原文链接：AngularJS 与Bootstrap实现表格分页实例代码
