Dynamic-Angular-Bootstrap-Datatable-Using-HTTP-Service-Methods/index.html at master · Nareshkumar979/Dynamic-Angular-Bootstrap-Datatable-Using-HTTP-Service-Methods · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
	<title>Angular DataTable using HTTP Service with Bootstrap and Jquery Combinations</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-app="datatablesSampleApp">
	<div class="container">
	<div class="jumbotron text-center alert-success">
  		<h2>Angular JS + Angular Datatable + HTTP Service + Bootstrap + JQuery</h2>
	</div><!-- End of jumbotron -->
    <div ng-controller="simpleCtrl" class="code">
        <div class="panel panel-default">
  			<div class="panel-heading text-center">
  				<h3><b>API RESPONSE AS JSON</b></h3>
  				<p>API Used: <a href="https://jsonplaceholder.typicode.com/users" target="_blank">https://jsonplaceholder.typicode.com/users</a></p>
  			</div><!-- End of panel-heading -->
  			<div class="panel-body">{{persons}}</div>
		</div><!-- End of panel-default -->
        <br><br><br>
        <div class="well text-center">
        	<h3><b>API RESPONSE AS TABLE FORMAT</b></h3>
        	<p>API Used: <a href="https://jsonplaceholder.typicode.com/users" target="_blank">https://jsonplaceholder.typicode.com/users</a></p>
        </div><!-- End of .well -->
        <table datatable="ng" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Website</th>
                </tr>
            </thead>
            <tbody>
                <tr dt-rows ng-repeat="person in persons">
	                <td>{{ $index+1 }}</td>
	                <td>{{ person.name }}</td>
	                <td>{{ person.username }}</td>
	                <td>{{ person.email }}</td>
	                <td>{{ person.phone }}</td>
	                <td>{{ person.website }}</td>
                </tr>
            </tbody>
        </table><!-- End of Table -->
        <br><br><br>
    </div><!-- End of .code -->
	</div><!-- End of Container -->
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/angular-datatables.js"></script>
	<script src="js/angular-datatables.directive.js"></script>
	<script src="js/angular-datatables.factory.js"></script>
	<script src="js/angular-datatables.bootstrap.js"></script>
</body>
<script>
	(function(angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
    controller('simpleCtrl', function($scope, $http) {
    	$http.get("https://jsonplaceholder.typicode.com/users")
    	.then(function(response) {
        	$scope.persons = response.data;
    	});
    });
})(angular);
</script>
</html>