AngularJS ngTable在很多数据上都很慢

时间:2014-08-09 13:32:13

标签: angularjs ngtable

我有大量数据的数据,并尝试在AngularJS的表格中显示这些数据(带过滤和排序)。为此我尝试使用ng-Table,但是当数据太多(> 1000行)时,它在远程服务器上开始减速,当数据太多(> 5000行)时,带有此表的页面甚至无法加载在localhost机器上。据我所知,过滤和排序需要从数据库加载所有数据,可能是任何人都知道一些技巧而不加载所有数据。或者可能是任何人都知道Angular的另一个表插件。

感谢您的帮助。

3 个答案:

答案 0 :(得分:5)

您需要的信息在这里:http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/

建议如下:

  
      
  1. 对行进行分页,无论如何都无法一次看到所有2000行
  2.   
  3. 呈现没有数据绑定的列表
  4.   
  5. 不要使用内联方法调用来计算数据
  6.   
  7. 使用两个列表(一个用于显示视图,一个用作数据源)
  8.   
  9. 使用ng-if代替ng-show获取其他模板
  10.   
  11. 不要使用AngularJS指令ng-mouseenter,ng-mouseleave等
  12.   
  13. 调整过滤提示:隐藏已排除ng-show的元素
  14.   
  15. 调整提示过滤:去抖输入
  16.   

您的过滤和排序可能是问题,在控制器中应用过滤器并在那里对它们进行排序。

答案 1 :(得分:3)

最近我开始研究这个新的表组件#ngTasty,这里有一些示例如何通过客户端分页/排序http://zizzamia.com/ng-tasty/#Table和服务器端分页/排序http://zizzamia.com/ng-tasty/#TableServerSide来使用它。 如果它仍然很慢,我将很乐意解决并提高性能。

答案 2 :(得分:1)

为了获得最佳用户体验和处理大数据,我建议使用无限滚动或分页。

这是角度很好的工作(无限卷轴) http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs

对于分页,一篇好文章 http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs

试试这些。