在客户端搜索、排序和分页大型数据集
我一直在使用 jQuery 的 DataTables 插件 (http://www.datatables.net) 在客户端上搜索、排序和分页表格数据。实施的简单性和流畅的用户体验是一个巨大的胜利。
现在,我需要在更大的数据集(最多 1000 条记录)上实现相同的功能(搜索、排序、分页)。我希望为此使用相同的插件,但当表中的记录数量增加时,DataTables 的性能似乎会急剧下降。在 IE8 上,包含 500 个 tr
的表已经导致“此页面上的脚本运行缓慢”警报。
因为数据集不是那么大,如果可能的话,我非常希望在客户端上执行此操作。
有没有办法通过更改呈现的标记、禁用某些功能、以 JSON 而不是 HTML 的形式提供数据或以其他方式配置它来提高 DataTables 插件的性能,以在大多数现代浏览器(IE7+、 FF2+、Chrome)。
或者,是否有任何其他 javascript 库(最好是 jQuery)可以提供类似的功能?
I have been using the DataTables plugin for jQuery (http://www.datatables.net) to search, sort and paginate tabular data on the client. The simplicity of implementation and smooth user experience have been a huge win.
Now I have a requirement to implement the same functionality (search, sort, paginate) over a larger set of data, max 1000 records. I was hoping to use the same plug-in for this, but it seems that the performance of DataTables degrades steeply when the number of records in the table increases. On IE8, a table of 500 tr
s already causes the "A script on this page is running slow" alert.
Because the datasets are not that huge, I would very much like to do this on the client if possible.
Is there any way to improve the performance of DataTables plugin by changing the rendered markup, disabling some features, feeding the data as JSON instead of HTML or otherwise configuring it to achieve sensible performance for 1000 client-side records on most modern browsers (IE7+, FF2+, Chrome).
Alternatively, are there any other javascript libraries, preferably jQuery, which could offer similar functionality?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
经过进一步的性能测试后,发现排序导致了性能问题。 jQuery DataTables 不仅能够在 IE6 上对最多包含 3000 条记录的表进行分页和搜索,而且在上一代浏览器上的功能还要多得多。
您所要做的就是使用
"bSort":false
初始化 DataTables,它会像冠军一样轻松完成。After some further performance testing, it turns out that sorting is causing the performance issue. jQuery DataTables is more than able to paginate and search over tables of up to 3000 records on IE6, and far far more on last-gen browsers.
All you have to do is to initialize DataTables with
"bSort":false
and it'll take it like a champ.该问题已在最新版本的 DataTables (v1.7.5+) 中修复。作者更改了排序实现,不使用 eval 或 $.inArray()。
直接下载链接: http://datatables.net/download/build/jquery.dataTables .nightly.js
从更改日志中:
性能:重写排序实现,因此它不使用 $.inArray() 的 eval() 。 inArray 被发现对 IE 有严重的负面影响,IE 会计算操作以给出“脚本运行缓慢”错误消息 - 新的实现使用值/键反向映射来使查找与单个对象参数检索一样快。
使用以下信息(或更高版本)获取构建
每晚:1.7.5.dev 2010 年 11 月 28 日星期日 14:42 下载 下载分钟 注释
This is fixed in a recent build of DataTables (v1.7.5+). The author changed the sort implementation to not use eval or $.inArray().
Direct download link: http://datatables.net/download/build/jquery.dataTables.nightly.js
From the change log:
Performance: Re-written the sorting implementation so it doesn't use either eval() of $.inArray(). inArray was found to have a serious negative effect on IE which counts operations to give the 'script is running slow' error message - the new implemention uses a value / key reverse mapping to make the look up as fast as a single object parameter retreival.
Grab the build with the following info (or later)
Nightly: 1.7.5.dev Sunday 28th November 2010, 14:42 Download Download min Notes
我比较喜欢flexigrid:
http://www.flexigrid.info/
记录数不是一个问题,因为它是在每个页面实现的。所以我们不会一次管理 1000 条记录。
I am more fond of flexigrid:
http://www.flexigrid.info/
The number of records is not a problem, because it is implemented every page. So we are not managing 1000 records at a time.