Angualrjs和引导程序相结合实现数据表格桌子

AngularJS的数据表格

需要使用angualarjs、bootstrap、dirPagination.js

效果图：

1.html部分

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' data-ng-app=' app ' hearta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title anglarjs的数据表格/title link rel='样式表href=' CSS/bootstrap-3。0 .0/CSS/bootstrap。CSS ' rel='外部no follow '/link href=' CSS/special。CSS ' rel='外部nofollow' rel='样式表'/脚本src='http:js/angular-1。3 .0 .js /脚本src=' http :供应商/dirpagination。js /脚本src=' http : js '的数据表格/div table class='sp-grid '和tr th style=' width : 20%；'应用代码/th style=' width : 20%；'应用名称/th style=' width : 20%；'版本/th style=' width : 20%；'状态/th style=' width : 20%；'操作/th/tr/ad t正文id=' my APPLicatable ' tr ng-show=' aly。用户。length=0 ' TD colspan=' 5 ' style=' text-align 3360 center；'还没有数据/TD/tr dir-paginate=' aly中的用户。用户|项目perpage : aly。items perpage ' total-items=' aly。total _ count ' TD { { user }。代码} }/TD TD { {用户。name } }/TD { { user。版本} }/TD TD { {用户。状态} }/TD TD TD TD a class=' sp-color-blue '安装/a| a class='sp-color-green '查看/a /td /tr！DDD员工管理/td tdv2.0.1/td td已启用/TD TDA ui-sref=' app。apply _ view ' class=' lig blue '查看/a/TD/tr-/t正文/表格目录-分页-控件最大大小=' 8 '方向-link=' true '边界-link=' true '页上-改变=' aly。getdata(新页码)'/dir-paging-controls/div/form/body/html 2。angularjstable。射流研究…部分

使用"严格";var app=angular.module('app '，[' angularutils。方向。dirpagination '])；app.controller('tableCtrl '，['$http '，function($ http){ var self=this；//数据表格的控制器，动态加载桌子表格数据自我。用户=[]；//声明一个空数组自我。页码=1；//将页码初始化为1个自我。合计_计数=0；self.itemsPerPage=10//这可能是一个下拉自我。getdata=函数(页码){//这将获取页面更改时的数据。//实际上这应该是在工厂里自我。页码=页码；自我。用户=[]；$http({ method: 'get '，URL : ' JSON/myapp . txt '，数据： { pagesize : self。项目perpage，pageno: self.pageno } }).成功（函数（响应){ self。用户=响应。数据；//ajax请求将数据提取到自我。数据自我。total _ count=响应。total _ count});};自我。getdata(self。页码)；//数据表格的控制器end }])；3.json数据部分myApply.txt

{ 'data':[ { 'id':'1 '，' code':'dheu22102d '，' name': '项目管理、"版本“:”v1。0 .1"、"状态":未启用}，{ 'id':'2 '，'代码：'asd1234ddd '，'名称' : '员工管理、"版本“:”v2。0 .1"、"状态":已启用}]，' total_count': 22}以上所述是小编给大家介绍的Angualrjs和引导程序相结合实现数据表格桌子，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！