<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController as MC">
<table ng-table="MC.tableParams" show-filter="true" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="x in data">
<td data-title="'Held'" filter="{Held: 'text'}" sortable="'Held'">{{ x.Held }}</td>
<td data-title="'Waffe'" filter="{Waffe: 'text'}" sortable="'Waffe'">{{ x.Waffe }}</td>
<td data-title="'Schild'" filter="{Schild: 'text'}" sortable="'Schild'">{{ x.Schild }}</td>
<td data-title="'Ring'" filter="{Ring: 'text'}" sortable="'Ring'">{{ x.Ring }}</td>
<td data-title="'Amulett'" filter="{Amulett: 'text'}" sortable="'Amulett'">{{ x.Amulett }}</td>
<td data-title="'Mantel'" filter="{Mantel: 'text'}" sortable="'Mantel'">{{ x.Mantel }}</td>
<td data-title="'Off'" sortable="'Off'">{{ x.Off }}</td>
<td data-title="'Off T'" sortable="'OffT'">{{ x.OffT }}</td>
<td data-title="'Def'" sortable="'Def'">{{ x.Def }}</td>
<td data-title="'Def T'" sortable="'DefT'">{{ x.DefT }}</td>
<td data-title="'Hybrid'" sortable="'Hybrid'">{{ x.Hybrid }}</td>
<td data-title="'Hybrid T'" sortable="'HybridT'">{{ x.HybridT }}</td>
<td data-title="'Def A'" sortable="'DefA'">{{ x.DefA }}</td>
<td data-title="'Def AT'" sortable="'DefAT'">{{ x.DefAT }}</td>
<td data-title="'Off A'" sortable="'OffA'">{{ x.OffA }}</td>
<td data-title="'Off AT1'" sortable="'OffAT1'">{{ x.OffAT1 }}</td>
<td data-title="'Off AT2'" sortable="'OffAT2'">{{ x.OffAT2 }}</td>
<td data-title="'Hybrid A'" sortable="'HybridA'">{{ x.HybridA }}</td>
<td data-title="'Hybrid AT1'" sortable="'HybridAT1'">{{ x.HybridAT1 }}</td>
<td data-title="'Hybrid AT2'" sortable="'HybridAT2'">{{ x.HybridAT2 }}</td>
<td data-title="'Extra Truppen'" sortable="'ExtraTruppen'">{{ x.ExtraTruppen }}</td>
</tr>
</table>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://unpkg.com/ng-table@4.0.0/bundles/ng-table.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var test = angular.module('myApp', ['ngTable']);
test.controller('myController', ['$scope', '$filter', '$http', 'NgTableParams',
function myController($scope, $filter, $http, NgTableParams) {
var self = this;
$scope.dataFiles = [];
$http.get('http://sanctuments.16mb.com/getData.php').success(function(data, status) {
$scope.dataFiles = data;
self.tableParams = new NgTableParams({
page: 1, // show first page
count: 50 // count per page
}, {
total: data.length,
getData: function(params) {
$scope.data = params.sorting() ? $filter('orderBy')($scope.dataFiles, params.orderBy()) : $scope.dataFiles;
$scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
$scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
return $scope.data;
}
});
});
}
]);
var app = angular.module('myApp', ['ngTable']);
app.controller('myController', function myController($scope, $http, NgTableParams) {
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 5 // count per page
}, {
getData: function($defer, params) {
$http.get('../getData.php').
$promise.then(function(data, status) {
var orderedData = data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
})
}
})
});