Search filter is too slow in angularjs with large dataset

[Suhas Pansare]

I have AngularJs client application which displays data in table using dir-paginate directive of dirPagination.js

 <tr dir-paginate="user in Results| filter: vm.searchKeyword  |orderBy:orderByField:vm.reverseSort| itemsPerPage:30" current-page="vm.current_page">

Here is the search input

 <input type="text"  ng-change="vm.SomeTask()"  ng-model="vm.searchKeyword" />

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

[Zlatko Đurić]

Hi,

On Wednesday, November 8, 2017 at 5:51:39 AM UTC+1, Suhas Pansare wrote:

I have AngularJs client application which displays data in table using dir-paginate directive of dirPagination.js

 <tr dir-paginate="user in Results| filter: vm.searchKeyword  |orderBy:orderByField:vm.reverseSort| itemsPerPage:30" current-page="vm.current_page">

Here is the search input

 <input type="text"  ng-change="vm.SomeTask()"  ng-model="vm.searchKeyword" />

I think something like a debounce would help to avoid running the whole thing on ANY change. E.g. you mention deleting a word - let's say 6-character word, and then type a new name, 6 more characters, that's 12 times running filter, sort, reverse, and then also rendering the whole thing.

So your input would become something like:

 <input type="text"  ng-change="vm.SomeTask()"  ng-model="vm.searchKeyword" ng-model-options="{debounce: 500}"/>

There, now your model update is only running every half a second. See if that helps, if not, there are more tricks to try.

 

[Sander Elias]

Hi Suhas,


Aside from the answer, Zlatko provided, add an index-by, that will speed up things. Also look into using one-time bindings. For the calculation of the pagination, you need to create an intermediary variable to hold the result array.

Doing those 3 things, you should have more than enough speed.

the var can be created like:

<tr dir-paginate="user in (filteredResults = (Results| filter: vm.searchKeyword |orderBy:orderByField:vm.reverseSort )| itemsPerPage:30)" current-page="vm.current_page">

Once that is done, you can calculate the pagination by using filteredResults.length

Regards

Sander