- AngularJS : 1.2.23
- Bootstrap : 3.x
- ng-grid : 2.0.13
- include file ng-grid.min.css,jquery.js,angular.min.js,ng-grid.min.js,ui-bootstrap-tpls-0.11.0.min.js
Filter:
<link href="http://www.example.com/wp/wp-content/themes/ang/css/ng-grid.min.css" rel="stylesheet"> <link href="http://www.example.com/wp/wp-content/themes/ang/css/grid1.css" rel="stylesheet"> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ng-grid.min.js'></script> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid1.js'></script> <div ng-controller="MyCtrl2"> <div class="row"> <div class="col-sm-12"> <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" /> <div class="gridStyle" ng-grid="gridOptions"> </div> </div> </div> </div>
var myApp = angular.module('googleMapApp', ['ui.bootstrap','ngGrid']); myApp.controller('MyCtrl', function($scope,$http) { $scope.pagingOptions = { pageSizes: [3, 5, 8], pageSize: 3, currentPage: 1 }; $scope.totalServerItems = 0; $scope.setPagingData = function(data,page,pageSize){ var pagedData = data.slice((page - 1) * pageSize, page * pageSize); $scope.myData = pagedData; $scope.totalServerItems = data.length; if (!$scope.$$phase) { $scope.$apply(); } }; $scope.getPagedDataAsync = function (pageSize, page, searchText) { setTimeout(function () { var data; if (searchText) { var ft = searchText.toLowerCase(); $http.get('../wp-content/themes/ang/json-grid.php').success(function (largeLoad) { data = largeLoad.filter(function(item) { return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; }); $scope.setPagingData(data,page,pageSize); }); } else { $http.get('../wp-content/themes/ang/json-grid.php').success(function (largeLoad) { $scope.setPagingData(largeLoad,page,pageSize); }); } }, 100); }; $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); $scope.$watch('pagingOptions', function (newVal, oldVal) { if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true); $scope.$watch('filterOptions', function (newVal, oldVal) { if (newVal !== oldVal) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true); $scope.filterOptions = { filterText: "", useExternalFilter: true }; $scope.gridOptions = { data: 'myData', enablePaging: true, showFooter: true, totalServerItems: 'totalServerItems', pagingOptions: $scope.pagingOptions, filterOptions: $scope.filterOptions }; });
<?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)); ?>
Its doesn’t change when we change page size its content would be as it it .
Thanks article is good . I tried this example but while clicking on 2 as page number I am not able display data from 21 to 30 on my 2nd page.
and I have one question regrading filter we are call get again but why ? and plz tell me how I can filter the column which I am getting from paging option instead of above one