javascripthtmlangularjsdirpagination

Search filter is too slow in angularjs with large dataset


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


Solution

  • 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);
                }
    
         });