<link href="http://www.example.com/wp/wp-content/themes/ang/css/ui-grid.min.css" rel="stylesheet">
<link href="http://www.example.com/wp/wp-content/themes/ang/css/grid.css" rel="stylesheet">
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ui-grid.min.js'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid.js'></script>
<div ng-controller="MyCtrl">
<div class="row">
<div class="col-sm-12">
<div class="myGrid" ui-grid="gridOptions" ui-grid-pagination></div>
</div>
</div>
</div>
var myApp = angular.module('MyApp', ['ui.grid', 'ui.grid.pagination']);
myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enablePaging: true,
showFooter: true,
paginationCurrentPage : 1,
paginationPageSizes: [3, 5, 8],
paginationPageSize: 3
};
$http.get('json-grid.php')
.then(function onSuccess(response) {
$scope.gridOptions.data = response.data;
});
}]);
(grid.css)
.myGrid {
height: 300px;
}
<?php
require("dbinfo.php");
$dsn = 'mysql:host=localhost;dbname='.$database.';charset=utf8';
try {
$dbh = new PDO($dsn, $username, $password,array(PDO::ATTR_EMULATE_PREPARES =>
false,PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`"));
} catch (PDOException $e) {
exit('DB connect error'.$e->getMessage());
}
$st = $dbh->query("SELECT * FROM grid_products WHERE 1");
echo json_encode($st->fetchAll(PDO::FETCH_ASSOC));
?>