AngularJS 与Bootstrap实现表格分页实例代码
发布时间：2020-12-18 00:48:33 所属栏目：安全 来源：网络整理
导读：AngularJS 从开始发布到现在使用的开发的者越来越多，也表明大多数做前端的朋友在往这边转，毕竟是Google 公司出品的产品啊，所以最近自己也在学习这部分知识。 AngularJS Bootstrap实现表格分页： 最近一直学习Angular.js，在学习过程中也练习了很多的Demo
|
AngularJS 从开始发布到现在使用的开发的者越来越多，也表明大多数做前端的朋友在往这边转，毕竟是Google 公司出品的产品啊，所以最近自己也在学习这部分知识。 AngularJS Bootstrap实现表格分页：最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。 先上图看看最终结果：
不得不说Angular.js代码风格很受人欢迎，几十行代码清晰简洁的实现了上面的功能。 首先表格的数据源来自于，Server.js 点击下载。通过get取数后分页显示。 1.表格是通过ng-repeat来展示的，代码如下： index
|
$index是repeat的默认参数。表格的列头是通过数据源（json）的第一行循环取的key值。当然要是Bootstrap要指定table的Class是table table-bordered。 2.分页是也是用ng-repeat，不得不说ng-repeat是常用指令。分页代码如下：
这里用了ng-click事件指令。还用到ng-class指令
上面的代码是为了分页选中的样式。 这个表格加分页是假分页，从后端取一次数据，通过不同的分页显示json的筛选数据。
#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;
}
index
|
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
