Come creare una tabella con funzioni ordinamento DB AngularJS Bootstrap PHP JSON
Una piccola guida di come usare Angular JS e Bootstrap , per creare una tabella in modo veloce e che abbia la possibilita' di ordinarsi (senza ricaricare il contenuto) in base alla colonna che si sceglie.
Per questo esempio prelevero' dei dati dal DB di una libreria (quindi: titolo,autore,ecc..)
Come prima cosa creiamo un file PHP che prelevera' i dati dal DB e li restituira' nel formato JSON
Codice PHP:
<?php
$mysqli = new MySQLi(.................................................);
if($mysqli->connect_error) {
echo 'Database connection failed...' . 'Error: ' . $mysqli->connect_errno . ' ' . $mysqli->connect_error;
exit;
} else {
$mysqli->set_charset('utf8');
}
$a_json = array();
$a_json_row = array();
if ($data = $mysqli->query("SELECT * FROM libreria")) {
while($row = mysqli_fetch_array($data)) {
$a_json_row["categoria"] = $row['categoria'];
$a_json_row["titolo"] = $row['titolo'];
$a_json_row["anno"] = $row['anno'];
$a_json_row["autore"] = $row['autore'];
array_push($a_json, $a_json_row);
}
}
echo json_encode($a_json);
flush();
$mysqli->close();
?>
Quindi avremo un dato formattato JSON che avra' questo aspetto:
Codice:
[{"categoria":"Narrativa","titolo":"Il Pendolo di Foucault","anno":"1990","autore":"Umberto Eco"},....
Adesso creiamo il nostro file HTML con lo script
da notare tutti gli stili e la grafica in generale verra' generata usando le librerie di Bootstrap
come prima cosa carichiamo le librerie per gli script e gli style
Codice:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
quindi creiamo una funzione AngularJS che eseguira' il nostro file PHP ed assegnera' il risultato all'oggetto VALORI
Codice:
function customController($scope,$http) {
$http.get("cerca.php")
.success(function(response) {$scope.valori = response;});
}
successivamente creiamo la funzione per l'ordinamento della tabella
Codice:
$scope.funzioneSORT = function(tipo) {
$scope.tipo = tipo;
};
gli script sono conclusi passiamo quindi al HTML ..
creiamo un DIV e gli assegniamo il controller AngularJS
Codice HTML:
<div ng-app="" ng-controller="customController">
quindi disegnamo la tabella :
nel THEAD oltre ai nomi delle colonne inseriremo dei glyph (immagini) con funzione pulsante che chiameranno la nostra funzione per l'ordinamento
Codice HTML:
...
<th><button type="button" class="btn btn-primary btn-xs" ng-click="funzioneSORT('categoria')"><span class="glyphicon glyphicon-signal"></span></button>Categoria</th>
...
infine il corpo della tabella , in cui definirimo i campi da visualizzare (estratti dall'oggetto VALORI) e dichiareremo che l'ordinamento sara' subordinato alla variabile TIPO (definita nel pulsati sopra citati e richiamata dalla funzione di ordinamento vista all'inizio).
Codice HTML:
<tr ng-repeat="x in valori | orderBy:tipo">
<td>{{ x.categoria | uppercase }}</td>
<td>{{ x.titolo }}</td>
<td>{{ x.autore }}</td>
<td>{{ x.anno }}</td>
</tr>
Fine! .. ed ecco il DEMO ed il codice HTML completo..
Codice HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function customController($scope,$http) {
$http.get("cerca.php")
.success(function(response) {$scope.valori = response;});
$scope.funzioneSORT = function(tipo) {
$scope.tipo = tipo;
};
}
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div ng-app="" ng-controller="customController">
<table class="table table-striped table-bordered">
<thead>
<tr class="success">
<th><button type="button" class="btn btn-primary btn-xs" ng-click="funzioneSORT('categoria')"><span class="glyphicon glyphicon-signal"></span></button>Categoria</th>
<th><button type="button" class="btn btn-primary btn-xs" ng-click="funzioneSORT('titolo')"><span class="glyphicon glyphicon-signal"></span></button>Titolo</th>
<th><button type="button" class="btn btn-primary btn-xs" ng-click="funzioneSORT('autore')"><span class="glyphicon glyphicon-signal"></span></button>Autore</th>
<th><button type="button" class="btn btn-primary btn-xs" ng-click="funzioneSORT('anno')"><span class="glyphicon glyphicon-signal"></span></button>Anno</th>
</tr>
</thead>
<tr ng-repeat="x in valori | orderBy:tipo">
<td>{{ x.categoria | uppercase }}</td>
<td>{{ x.titolo }}</td>
<td>{{ x.autore }}</td>
<td>{{ x.anno }}</td>
</tr>
</table>
</div>
</body>
</html>
NLSweb
