金沙注册网站-新金沙官网 服务器运维 Angualrjs和bootstrap相结合实现数据表格table_AngularJS_脚本之家

Angualrjs和bootstrap相结合实现数据表格table_AngularJS_脚本之家

金沙注册网站,AngularJS的数据表格

需要使用angualarjs、bootstrap、dirPagination.js

1.html部分

 angularjs的数据表格      

2.angularjsTable.js部分

'use strict';var app = angular.module('app', [ 'angularUtils.directives.dirPagination']);app.controller('tableCtrl', ['$http', function  { var self = this; //数据表格的控制器,动态加载table表格数据 self.users = []; //declare an empty array self.pageno = 1; // initialize page no to 1 self.total_count = 0; self.itemsPerPage = 10; //this could be a dynamic value from a drop down self.getData = function  { // This would fetch the data on page change. //In practice this should be in a factory. self.pageno = pageno; self.users = []; $http({ method: 'get', url: 'json/myApply.txt', data: { pagesize: self.itemsPerPage, pageno: self.pageno } }).success { self.users = response.data; //ajax request to fetch data into self.data self.total_count = response.total_count; }); }; self.getData; //数据表格的控制器 end}]);

3.json数据部分 myApply.txt

{ "data":[ { "id":"1","code":"dheu22102d","name":"项目管理","version":"v1.0.1","status":"未启用" }, { "id":"2","code":"asd1234ddd","name":"员工管理","version":"v2.0.1","status":"已启用" }],"total_count": 22}

以上所述是小编给大家介绍的Angualrjs和bootstrap相结合实现数据表格table,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图