browser crashes while displaying 6000 Records in angularjs

Question

I am trying to display the large set of records with ng-repeat, but the browser crashes.How could I display large dataset without using infinite scroll.

there is no reason to show 6000 records at a time as user is not going to view 6000 record at time, I'd say that either do pagination or use infinite scroll.. — Pankaj Parkar
– Pankaj Parkar, Commented Jul 20, 2016 at 15:39
Agree with comments here that displaying 6000 things at once is likely not going to be a good user experience for anyone, so you should strongly think about paginating the results. — Mike Brant
– Mike Brant, Commented Jul 20, 2016 at 15:40
Agree with ur comments. But i have different table structure in a single Page and single scope variable binded all table's Value. — Bimal
– Bimal, Commented Jul 20, 2016 at 15:45

Anthony Patton · Accepted Answer · 2016-07-20 16:10:38Z

1

Like the others suggest, 6000 rows begs to be paged, but technically angular can handle that. I created a codepen with angular generating 10k rows are using ng-repeat to display a table, to show its technically possible. I suggest you use track-by in your ng-repeat as well as ng-cloak to optimize the rendering of that much data.

   <tbody ng-cloak>
   <tr ng-repeat="item in items track by item.key">

The reason your browser is crashing is likely due to the way the data is being created (possibly adding each row to the cope at a time and causing many render cycles), or due to the complexity of each rows display. So optimizations could allow you to display that much data without the browser crashing, but its still not a good idea (or a good user experience).

answered Jul 20, 2016 at 16:10

Anthony Patton

5963 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mccainz · Accepted Answer · 2016-07-20 15:38:20Z

0

6000 records is a problem that begs for paging in some form. Loading 6000 records in one go is not a good solution and especially not considering you are using Angular. You should use an Angular construct such as a dataTable which supports paging.

http://ng-table.com/#/

answered Jul 20, 2016 at 15:38

mccainz

3,5075 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

browser crashes while displaying 6000 Records in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related