AngularJS ngTable is slow in the amount of data
I have an array of data with a lot of data and try to display that data in a table in AngularJS (with filtering and sorting). For this I try to use ng-Table, but when there is too much data (> 1000 rows), it starts to slow down on the remote server, when there is too much data (> 5000 rows), the page with this table is not even loaded on the localhost machine. As far as I understand, filtering and sorting needs to load all data from the database, maybe someone knows some trick and doesn't load all data. Or maybe someone knows another plugin for Angular.
Thanks for any help.
source to share
The required information is here: http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/
Recommendations:
- Paginate the rows, they can't see all 2000 rows in one go anyway
- Display list without data binding
- Don't use inline method calls to compute data
- Use two lists (one for display for display, one for data source)
- Use ng-if instead of ng-show for additional templates
- Don't use AngularJS directives ng-mouseenter, ng-mouseleave, etc.
- Filter hint setup: hide items with ng-show that are excluded
- Filter hint setup: enter error message
Your filtering and sorting is probably the problem, applying filters in the controllers and sorting them there too.
source to share
I recently started working on this new #ngTasty table component, here is an example how to use it with pagination / sorting on the client side http://zizzamia.com/ng-tasty/#Table and pagination on the server / sorting http : //zizzamia.com/ng-tasty/#TableServerSide . If it's still slow, I'll be happy to work and improve performance.
source to share
For a better user experience and big data experience, I suggest you fade with infinite scrolling or pagination.
This is a good job for angular (Infinite Scroll) http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs
For pagination, good article http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs
Try with this.
source to share