AngularJS ui-grid filter pagination grid data

AngularJS : 1.6.5
ui-grid : 4.0.6
include file

<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="myGrid" ui-grid="gridOptions" ui-grid-pagination></div>
</div>

var myApp = angular.module('MyApp', ['ui.grid', 'ui.grid.pagination']);

myApp.controller('MyCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
    $scope.filterOptions = {
      filterText: "",
      useExternalFilter: true
    };
    $scope.gridOptions = {
      enableFiltering: true,
      enablePaging: true,
      showFooter: true,
      paginationCurrentPage : 1,
      paginationPageSizes: [3, 5, 8],
      paginationPageSize: 3,
      filterOptions: $scope.filterOptions,
      columnDefs: [
        {field: 'id', enableFiltering: false, width: '10%'},
        {field: 'name'},
        {field: 'group',
         filter: {
           type: uiGridConstants.filter.SELECT,
           selectOptions: [ { value: 'grp-A', label: 'grp-A' },
                            { value: 'grp-B', label: 'grp-B' },
                            { value: 'grp-C', label: 'grp-C' },
                            { value: 'grp-D', label: 'grp-D' }]}
        },
        {field: 'date', enableFiltering: false,},
        {field: 'count',
         filters: [
          {condition: uiGridConstants.filter.GREATER_THAN,
           placeholder: 'greater than'},
          {condition: uiGridConstants.filter.LESS_THAN,
           placeholder: 'less than'}
         ],
        }
      ]
    };
    $http.get('../wp-content/themes/wp/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));

?>

Web Programming examples