Good Morning,
thanks for this nice script, that´s exactly what I searched for, but I´ve one problem - the pagination does not appear, when I´ve more items than allowed on one page. Let me show my code:
app.js
var app = angular.module('myApp', ['ui.bootstrap']);
var app = angular.module('myApp', ['ngRoute']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('paperCtrl', function ($scope, $http, $timeout) {
$http.get('ajax/getPaper.php').success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 25; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
getPaper.php
$db_connection = new PDO('mysql:host=localhost;dbname=papiermanagement;charset=utf8', topsecret, topsecret);
$statement = 'SELECT * FROM items
JOIN places ON items.item_place_id = places.place_id
JOIN sorts ON items.item_sort_id = sorts.sort_id
JOIN types ON items.item_type_id = types.type_id
LEFT JOIN machines ON items.item_machine_id = machines.machine_id
LEFT JOIN keyaccounts ON items.item_keyaccount = keyaccounts.key_id
WHERE items.item_status = "LA"
GROUP BY items.item_id ORDER BY items.item_place_id ASC;'; //AND items.item_place_id = 1
$query = $db_connection->prepare($statement);
$query->execute();
$results = $query->fetchAll();
$i = 0;
foreach ($results as $result) {
$data[$i]['number'] = strval($i + 1);
$data[$i]['item_id'] = $result['item_id'];
$data[$i]['place_code'] = $result['place_code'];
$data[$i]['sort_name'] = $result['sort_name'];
$data[$i]['type_name'] = $result['type_name'];
$data[$i]['item_description'] = $result['item_description'];
$data[$i]['item_customer'] = $result['item_customer'];
$data[$i]['item_amount'] = $result['item_amount'];
$data[$i]['item_pallets'] = $result['item_pallets'];
$data[$i]['item_perpallets'] = $result['item_perpallets'];
$data[$i]['item_width'] = $result['item_width'];
$data[$i]['item_height'] = $result['item_height'];
$data[$i]['item_weight'] = $result['item_weight'];
$data[$i]['item_run'] = $result['item_run'];
$data[$i]['machine_name'] = $result['machine_name'];
$data[$i]['key_initial'] = $result['key_initial'];
$data[$i]['item_aunr'] = $result['item_aunr'];
$data[$i]['item_delivery'] = $result['item_delivery'];
$i++;
}
echo json_encode($data);```
HTML
```<div ng-controller="paperCtrl">
<div class="row">
<div class="col-md-2">Anzahl der Papiere:
<select ng-model="entryLimit" class="form-control">
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter"
class="form-control"/>
</div>
<div class="col-md-4">
<h5>{{ filtered.length }} aus {{ totalItems }} gefiltert</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>Nummer <a ng-click="sort_by('number');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Id <a ng-click="sort_by('item_id');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Stellplatz <a ng-click="sort_by('place_code');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Sorte <a ng-click="sort_by('sort_name');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Typ <a ng-click="sort_by('type_name');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Beschreibung <a ng-click="sort_by('item_description');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Zusatzbeschreibung <a ng-click="sort_by('item_customer');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Bogenanzahl <a ng-click="sort_by('item_amount');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Paletten <a ng-click="sort_by('item_pallets');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Bogen/Palette <a ng-click="sort_by('item_perpallets');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Breite (mm) <a ng-click="sort_by('item_width');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Höhe (mm) <a ng-click="sort_by('item_height');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Grammatur <a ng-click="sort_by('item_weight');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>BB/SB <a ng-click="sort_by('item_run');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>AT-Nummer <a ng-click="sort_by('item_aunr');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Papierlieferung <a ng-click="sort_by('item_delivery');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Maschine <a ng-click="sort_by('machine_name');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Vertrieb <a ng-click="sort_by('key_initial');"><i
class="glyphicon glyphicon-sort"></i></a></th>
<th>Aktion</th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.number}}</td>
<td>{{data.item_id}}</td>
<td>{{data.place_code}}</td>
<td>{{data.sort_name}}</td>
<td>{{data.type_name}}</td>
<td>{{data.item_description}}</td>
<td>{{data.item_customer}}</td>
<td>{{data.item_amount}}</td>
<td>{{data.item_pallets}}</td>
<td>{{data.item_perpallets}}</td>
<td>{{data.item_width}}</td>
<td>{{data.item_height}}</td>
<td>{{data.item_weight}}</td>
<td>{{data.item_run}}</td>
<td>{{data.item_aunr}}</td>
<td>{{data.item_delivery}}</td>
<td>{{data.machine_name}}</td>
<td>{{data.key_initial}}</td>
<td><span class="glyphicon glyphicon-remove"></span> </td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No customers found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)"
boundary-links="true" total-items="filteredItems" items-per-page="entryLimit"
class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>```
It would be nice, if you could give me a hint. Btw, all js, css files are loaded and there´s no Error after loading page in console, but the pagination container stays empty:
```<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>```
Regards, Dom
Good Morning,
thanks for this nice script, that´s exactly what I searched for, but I´ve one problem - the pagination does not appear, when I´ve more items than allowed on one page. Let me show my code:
app.js
getPaper.php