I have the following code,
Demo: http://plnkr.co/edit/CIjY45LGDUviCXVWONLQ?p=preview
HTML
<body ng-controller="MyCtrl">
<input type="text" ng-model="settings.filterOptions.filterText" />
<div class="list" ng-grid="settings"></div>
</body>
JS
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $filter) {
$scope.result = [];
$scope.all_data = [..............];
$scope.totalServerItems = 0;
$scope.selectedItems = [];
$scope.pagingOptions = {
currentPage : 1,
pageSize : 10
};
$scope.filterOptions = {
filterText: '',
useExternalFilter : true
};
if(!$scope.settings){
$scope.settings = {
enableColumnResize : true,
pagingOptions : $scope.pagingOptions,
filterOptions : $scope.filterOptions,
sortInfo: {fields: [], columns: [], directions: [] },
jqueryUITheme : true,
enablePaging : true,
useExternalSorting : true,
showFooter : true,
virtualizationThreshold: 100
};
}
$scope.settings.data = 'result';
$scope.settings.totalServerItems = 'totalServerItems';
$scope.settings.selectedItems = $scope.selectedItems;
$scope.$watch('pagingOptions', function (new_value, old_value) {
if($scope.filterOptions.filterText != ''){
return false;
}
var pagedData = $scope.all_data.slice((new_value.currentPage - 1) * new_value.pageSize , new_value.currentPage * new_value.pageSize);
$scope.result = pagedData;
$scope.totalServerItems = $scope.all_data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
}, true);
$scope.$watch('filterOptions', function (new_value, old_value) {
if(new_value){
$scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
if (!$scope.$$phase) {
$scope.$apply();
}
}
}, true);
});
Problem
When I filter with some random keywords, the grid gets empty but the pagination buttons are not disabled, I can still click the remaining number of pages. Can someone explain me the problem?
UPDATE I fixed it by making a very small change in the filterOptions
watch. Which looks like,
Demo http://plnkr.co/edit/ULLg6AuTBprMXEcR7eXC?p=preview
JS
$scope.$watch('filterOptions', function (new_value, old_value) {
if(new_value){
$scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
$scope.totalServerItems = $scope.result.length; //This helped out to fix the issue
if (!$scope.$$phase) {
$scope.$apply();
}
}
}, true);
Thanks in advance.
Sorry, i'm late.
I got this working by adding a modified footer template to the script:
var ft= "<div ng-show=\"showFooter\" class=\"ngFooterPanel\" ng-class=\"{'ui-widget-content': jqueryUITheme,
....
" <button class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()|| result.length < pagingOptions.pageSize\" title=\"{{i18n.ngPagerNextTitle}}\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>" +
" <button class=\"ngPagerButton\" ng-click=\"pageToLast()\" ng-disabled=\"cantPageToLast()|| result.length < pagingOptions.pageSize\" title=\"{{i18n.ngPagerLastTitle}}\"><div class=\"ngPagerLastTriangle\"><div class=\"ngPagerLastBar\"></div></div></button>" +
....
and assigning it to the grid with:
$scope.settings = {
...
footerTemplate:ft
};
I'm about to leave for the weekend so i can't test this throughly, but i hope it helps anyhow.
Here's a Plunker to play around with it.
I fixed it by making a very small change in the filterOptions
watch. Which looks like,
Demo http://plnkr.co/edit/ULLg6AuTBprMXEcR7eXC?p=preview
JS
$scope.$watch('filterOptions', function (new_value, old_value) {
if(new_value){
$scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
$scope.totalServerItems = $scope.result.length; //This helped out to fix the issue
if (!$scope.$$phase) {
$scope.$apply();
}
}
}, true);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.