<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="jquery@1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="angular-responsive-tables.min.js"></script>
<link rel="stylesheet" href="angular-responsive-table.css" />
<script src="script.js"></script>
<!-- TastyTable -->
<link rel="stylesheet" href="http://zizzamia.com/ng-tasty/bower_components/bootstrap/dist/css/bootstrap.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://zizzamia.com/ng-tasty/bower_components/ng-tasty/ng-tasty-tpls.js"></script>
<script src="angular-responsive-tables.min.js"></script>
<link rel="stylesheet" href="angular-responsive-table.css" />
</head>
<body ng-controller="MainCtrl">
<!--<div tasty-table bind-resource="resource">-->
<div tasty-table bind-resource-callback="getResource" bind-init="init">
<table wt-responsive-table class="table table-striped table-condensed">
<thead>
<tr>
<th ng-repeat="h in header.columns">{{h.name | uppercase }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<!-- <td>{{ row.ID }}</td> -->
<td>
<span action-button color="btn-success" itemid="row.ID" type="'recipe'"></span>
</td>
<td>{{ row.Name }}</td>
<td>{{ row.Basename }}</td>
<td>{{ row.Menge}}</td>
<td>
<uib-progressbar type="{{row._TYPE}}" value="(row.Restmenge / row.Menge) * 100">{{ row.Restmenge }}</uib-progressbar>
</td>
<td>{{ row.Nikotin }}mg</td>
<td>{{ row.Reifezeit }} {{ 'DAYS'}}</td>
<td>{{ row.Preis | currency }}</td>
<td>{{ row.Herstellungsdatum }}</td>
<td>{{ row.Benutzer }}</td>
<!-- <td>{{ row.Bewertung }}</td> -->
<!-- <td>{{ row.Eigenschaften }}</td> -->
</tr>
</tbody>
</table>
<div tasty-pagination bind-list-items-per-page="listItemsPerPage"></div>
</div>
</body>
</html>
// Code goes here
var app = angular.module('myApp',['wt.responsive', 'ngTasty']) ;
app.factory("Data", ['$http',
function ($http) { // This service connects to our REST API
var serviceBase = '';
var obj = {};
obj.get = function (q, object) {
return $http.get(serviceBase + q).then(function (results) {
return results.data;
});
};
return obj;
}]);
function MainCtrl ($scope, Data){
$scope.init = {
'count': 10,
'page': 1,
'sortBy': 'name',
'sortOrder': 'dsc'
};
$scope.getResource = function(params, paramsObj) {
return Data.get('recipes.json').then(function(results) {
return {
'rows': results.rows,
'header': results.header,
'pagination': results.pagination[0]
}
});
}
}
angular
.module('myApp')
.controller('MainCtrl',MainCtrl);
/* original: http://css-tricks.com/responsive-data-tables/ */
.responsive {
width: 100%;
border-collapse: collapse;
}
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
/* table.responsive,*/
.responsive thead,
.responsive tbody,
.responsive tr,
.responsive th {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.responsive thead tr, .responsive th {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive tr {
border: 1px solid #ccc;
}
.responsive td:nth-child(odd), .responsive td:nth-child(even) {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
min-height: 1em;
}
.responsive td:nth-child(odd)::before, .responsive td:nth-child(even)::before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 6px;
width: 45%;
padding-right: 10px;
-ms-word-wrap: break-word;
word-wrap: break-word;
text-align: left;
font-weight: bold;
/*
Label the data
*/
content: attr(data-title);
}
.responsive td.responsive-omit-title:nth-child(odd), .responsive td.responsive-omit-title:nth-child(even) {
padding-left: 6px;
}
.responsive td.responsive-omit-title::before {
display: none;
}
.responsive td.responsive-omit-if-empty:empty {
display: none;
}
}
// https://github.com/awerlang/angular-responsive-tables
!function(){"use strict";function getHeaders(element){return element.querySelectorAll("tr > th")}function updateTitle(td,th){var title=th&&th.textContent;title&&!td.getAttributeNode("data-title")&&td.setAttribute("data-title",title)}function colspan(td){var colspan=td.getAttributeNode("colspan");return colspan?parseInt(colspan.value):1}function wtResponsiveTable(){return{restrict:"A",controller:function($element){return{getHeader:function(td){var headers=getHeaders($element[0]);if(headers.length){var row=td.parentElement,headerIndex=0,found=Array.prototype.some.call(row.querySelectorAll("td"),function(value,index){return value===td?!0:void(headerIndex+=colspan(value))});return found?headers.item(headerIndex):null}}}},compile:function(element,attrs){function apply(){var headers=getHeaders(element[0]);if(headers.length){var rows=element[0].querySelectorAll("tbody > tr");Array.prototype.forEach.call(rows,function(row){var headerIndex=0;Array.prototype.forEach.call(row.querySelectorAll("td"),function(value,index){if(!value.getAttributeNode("responsive-dynamic")){var th=value.parentElement.querySelector("th")||headers.item(headerIndex);updateTitle(value,th)}headerIndex+=colspan(value)})})}}attrs.$addClass("responsive"),Array.prototype.some.call(element.find("th"),function(it){return it.getAttributeNode("ng-repeat")||it.getAttributeNode("data-ng-repeat")})?setTimeout(function(){apply()},0):apply()}}}function wtResponsiveDynamic(){return{restrict:"A",require:"^^wtResponsiveTable",link:function(scope,element,attrs,tableCtrl){var td=element[0],th=tableCtrl.getHeader(td);updateTitle(td,th)}}}angular.module("wt.responsive",[]).directive("wtResponsiveTable",[wtResponsiveTable]).directive("responsiveDynamic",[wtResponsiveDynamic])}();
{
"header": [
{
"key": "action",
"name": ""
},
{
"key": "Name",
"name": "Name"
},
{
"key": "Basename",
"name": "Basename"
},
{
"key": "Menge",
"name": "Menge"
},
{
"key": "Restmenge",
"name": "Restmenge"
},
{
"key": "Nikotin",
"name": "Nikotin"
},
{
"key": "Reifezeit",
"name": "Reifezeit"
},
{
"key": "Preis",
"name": "Preis"
},
{
"key": "Herstellungsdatum",
"name": "Herstellungsdatum"
},
{
"key": "Benutzer",
"name": "Benutzer"
}
],
"rows": [
{
"ID": "87",
"Name": "Harmonic Pistachio",
"Basename": "100ml - 12mg VPG 55-35",
"Menge": "50.00",
"Restmenge": "44.00",
"Nikotin": "12",
"Reifezeit": "5",
"Preis": "4.48",
"Herstellungsdatum": "2016-08-07 10:46:54",
"Benutzer": "Dampfer-Tools",
"_TYPE": "succes"
},
{
"ID": "96",
"Name": "testffff",
"Basename": "100ml - 12mg VPG 50-50",
"Menge": "50.00",
"Restmenge": "50.00",
"Nikotin": "12",
"Reifezeit": "10",
"Preis": "2.16",
"Herstellungsdatum": "2016-08-29 21:45:21",
"Benutzer": "Disane",
"_TYPE": "succes"
}
],
"pagination": [
{
"size": "4",
"count": 10,
"pages": 0,
"page": 1
}
]
}