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