如何优化 jquery 数据表以有效加载大数据(10k-50k 行)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26052496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:13:23  来源:igfitidea点击:

How to optimize jquery datatable to load large data efficiently (10k-50k rows)?

jqueryhtmljquery-datatables

提问by abhinsit

I am using jquery datatable with minimal configuration to showcase data on my website. I have 10K to 50K records to show in datatable.

我正在使用配置最少的 jquery 数据表来展示我网站上的数据。我有10K 到 50K 的记录要显示在 datatable 中

Currently the datatable is taking around 60 seconds to initialize 3000 records.

目前数据表需要大约60 秒来初始化 3000 条记录

There are two options that can be utilized to initialize data-table:-

有两个选项可用于初始化数据表:-

1) Add records as a html table on page and then initialize datatable on that table.
2) Have a json of records and then initialize datatable with that data.

1)将记录添加为页面上的html表,然后在该表上初始化数据表。
2)有一个记录的json,然后用该数据初始化数据表。

Do the following steps helps us to improve the performance of datatable plugin:-

执行以下步骤有助于我们提高数据表插件的性能:-

1) Reducing number of columns
2) Grouping related columns
3) Using sort only on required fields or remove sort feature all together

1) 减少列数
2) 对相关列进行分组
3) 仅对必填字段使用排序或一起删除排序功能

Data is as follows- It is a set of mcq questions with options to preview/edit/delete

数据如下- 这是一组 mcq 问题,带有预览/编辑/删除选项

enter image description here

在此处输入图片说明

Search on question is something very important for my application.
Please provide an optimal solution to use datatable for the provided dataset.

搜索问题对我的申请非常重要
请为提供的数据集提供使用数据表的最佳解决方案。

回答by AmuletxHeart

You forgot a third option: server side processing

您忘记了第三个选项:服务器端处理

You can learn almost everything you need to know from the official documentation: http://www.datatables.net/examples/server_side/simple.html

你几乎可以从官方文档中学到你需要知道的一切:http: //www.datatables.net/examples/server_side/simple.html

Basically what you do is you only load data that is absolutely required to display the table. As the page needs more data such as going to a different page or searching, the server returns the client with more data.

基本上,您所做的只是加载显示表格绝对需要的数据。由于页面需要更多数据(例如转到不同页面或搜索),服务器将更多数据返回给客户端。

There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.

有很多方法可以将您的数据放入 DataTables,如果您正在使用非常大的数据库,您可能需要考虑使用 DataTables 提供的服务器端选项。启用服务器端处理后,DataTables 执行的所有分页、搜索、排序等操作都将移交给 SQL 引擎(或类似引擎)可以在大型数据集上执行这些操作的服务器(毕竟,这就是数据库引擎专为!)。因此,每次绘制表格都会产生一个新的 Ajax 请求以获取所需的数据。