i made table displays values array, added filter. table paginated maximum of 5 records per page.
the problem occurs when apply filter. example, if search term "ora" have 3 records, 1 on each page.
how these results display (on 1 page, or how many pages needs, not dissipated) , when remove filter display normal (in pages)?
the live code available here: https://plnkr.co/edit/qicmquqabdjcv3h6vqro?p=preview
html:
<body ng-app="salariesapp" ng-controller="mainctrl"> <table class="table"> <thead> <tr> <th ng-click="sortby(id)">nr. crt.</th> <th ng-click="sortby(an)">anul</th> <th ng-click="sortby('den')">denumirea institutiei/companiei</th> </tr> </thead> <tbody> <tr> <td class="tablesearch"></td> <td class="tablesearch"><input class="form-control" type="text" id="inputyear" ng-model="searchsal.an" ng-value={{crryear}} /></td> <td class="tablesearch"><input class="form-control" type="text" id="inputname" ng-model="searchsal.den" /></td> </tr> <tr ng-repeat="rows in showsal | filter: searchsal | orderby: sortproperty: !reverse | filter : paginate track $index"> <td class="spa-col-md-1">{{rows.id}}</td> <td class="spa-col-md-2">{{rows.an}}</td> <td class="col-md-5">{{rows.den}}</td> </tr> </tbody> </table> <pagination total-items="totalitems" ng-model="currentpage" max-size="5" boundary-links="true" items-per-page="numperpage" class="pagination-sm"> </pagination> </body> js:
var app = angular.module("salariesapp", ['ui.bootstrap']); app.constant("appconst", { pageslimit: 5, crryear: 2016 }); app.controller('mainctrl', ['$scope', 'appconst', function($scope, appconst) { $scope.crryear = appconst.crryear; $scope.pagenum = { linkbtnclass: 'linkbtnclass cursor-pointer' }; $scope.showsal = [ { id: '1', an: '2016', den: 'oracle romania' }, { id: '2', an: '2016', den: 'microsoft' }, { id: '3', an: '2016', den: 'computer generated solutions - cgs europe' }, { id: '4', an: '2016', den: 'ibm' }, { id: '5', an: '2016', den: 'luxoft' }, { id: '6', an: '2016', den: 'oracle romania' }, { id: '7', an: '2016', den: 'luxoft' }, { id: '8', an: '2016', den: 'computer generated solutions - cgs europe' }, { id: '9', an: '2016', den: 'ibm' }, { id: '10', an: '2016', den: 'luxoft' }, { id: '11', an: '2016', den: 'oracle romania' }, { id: '12', an: '2016', den: 'microsoft' }, { id: '13', an: '2016', den: 'ibm' }, { id: '14', an: '2016', den: 'luxoft' } ]; $scope.searchsal = ''; $scope.sortproperty = $scope.showsal.id; $scope.reverse = true; $scope.sortby = function (sortproperty) { $scope.reverse = ($scope.sortproperty === sortproperty) ? !$scope.reverse : false; $scope.sortproperty = sortproperty; }; // pagination: $scope.totalitems = $scope.showsal.length; $scope.currentpage = 1; $scope.numperpage = 5; $scope.paginate = function(value) { var begin, end, index; begin = ($scope.currentpage - 1) * $scope.numperpage; end = begin + $scope.numperpage; index = $scope.showsal.indexof(value); return (begin <= index && index < end); }; $scope.getoptionsclass = function (index) { if (index > 0) { return 'thumbnail nav-option-r'; } else { return 'thumbnail nav-option-l'; } }; }]);
i've done changes live version achieve want. check following link: //plnkr.co/edit/tz1woevpk8ullberbtlr?p=preview
the reason why version doesn't work filter filter job decide if model's meet condition not change model. if there's no changes happens model, there won't has changes pagination or table list.
so i've done create copy version of original model , add watcher that. can find further information if plnkr link i've attached abbove.
Comments
Post a Comment