I have AngularJs client application which displays data in table using dir-paginate directive of dirPagination.js. here is the code
<input type="text" ng-change="SomeTask()" ng-model="vm.searchKeyword" />
<table cellpadding="0" cellspacing="0" border="0" class="display table"
id="indicatorsTable">
<tbody style="border-bottom:1px solid black;">
<tr dir-paginate="user in vm.Results| filter: vm.searchKeyword:false
|orderBy:orderByField:vm.reverseSort| itemsPerPage:30" current-
page="vm.current_page" ng-class-odd="'indicatorTableBgColor'">
</tr>
</table>
<div class="right col-lg-6">
<dir-pagination-controls
style="float:right;" max-size="7" on-page-
change="vm.onPageChange(this)" boundary-links="true" template-
url="./app/indicator/dirPagination.tpl.html">
</dir-pagination-controls>
</div>
Javascript controller function
function GetDataFromBackEnd()
{
vm.Results=$http.GetData();
}
function SomeTask()
{
//do some task
}
searching takes a lot of time as on every key input ng-change function is called. when I erase a name in the Search function and type in a new name there is a significant delay, like 20 seconds or so, for the system to catch up to my typing.
There is no change in performance even if I replace dir-paginate with ng-repeat.
SomeTask function computes pageindex for paging (like for showing 1 to 30 of 100 results). Even if we remove ng-change not sure where to compute the pageindex of the filtered result set.
Any help would be highly appreciated.
Thanks
Ok I solved the problem using $filter service. I added $watch on search keyword and then searched for the keyword.
$scope.$watch('vm.searchKeyword', function (term) {
if (term != null && term != '') {
vm.Results = $filter('filter')(vm.orignalResults, term);
}
});