我正在通过 Django 显示一个 20k 行的 jquery 数据表。渲染速度非常慢。所以我想知道有什么替代方法可以更快地处理它，例如，通过延迟渲染，只加载显示的部分？数据库是sql。
我尝试在数据表选项中将 deferRender 和 serverSide 选项设置为 true，但它仍然很慢。我知道这些选项只有在通过 AJAX 调用数据时才有效。 datatables 网站中给出的示例只是将 AJAX 数据转储到预定义的列中。就我而言，我使用数据作为参数来生成链接和创建图标等。
代码如下:
<div class="container col-9 pb-5 mb-5">
<table id="drugstable" class="table table-hover" style="width: 100%">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Drug</th>
<th scope="col">Tool</th>
<th scope="col">netZoo release</th>
<th scope="col">Network</th>
</tr>
</thead>
<tbody>
{% for drug in drugs %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td><a href="{{ drug.drugLink }}">{{ drug.drug }}</a></td>
<td>{{ drug.tool }}</td>
<td>{{ drug.netzoo }} <a href="{{ drug.netzooLink }}">{{ drug.netzooRel }}</a></td>
<td><a href="{{ drug.network }}" download><i class="fas fa-download"></i></a></td>
</tr>
{% endfor %}
</tbody>
</table>
这里是对应的JavaScript
<script>
$(function () {
$('[data-toggle="popover"]').popover();
})
// Basic example
$(document).ready(function() {
//datatables
$('#drugstable').DataTable({
"dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
});
} );
</script>
最佳答案
如评论中所述，20,000 行将花费浏览器使用 jQuery DataTables 呈现的大量时间。您可能想研究使用 jQuery DataTables 进行分页加载。为此，您需要使用 Django REST Framework 之类的工具从 Django 后端提供数据。
在 jQuery 中配置是很棘手的。假设您有一个 Django REST Framework 端点，它提供来自您的 Django 模型的三个字段，分别是 col1、col2 和 col3。这是从名为 https://example.com/api/my-endpoint/ 的端点逐步加载它的 JavaScript 和 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include jQuery and DataTables -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<title>My API in Data Tables</title>
</head>
<body>
<table class="table table-hover" width="100%" id="mydatatable">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
url = "https://example.com";
endpoint = "/api/my-endpoint/";
table = $('#mydatatable').DataTable({
"processing": true,
"serverSide": true,
"lengthMenu": [10, 25, 50, 100],
"pagingType": "simple",
"info": true,
"ajax": {
"url": url + endpoint,
"beforeSend": function (request) {
request.setRequestHeader("Authorization", "Token MyTokenMyTokenMyTokenMyToken");
},
"data": function(d) {
// Map DataTables field names to DRF field names
// DataTables `start` becomes DRF `offset`
// DataTables `length` becomes DRF `limit`
//
// Routines handle converting DataTables ordering and search
// values for the DRF on input
d.offset = d.start;
d.limit = d.length;
var ordering = '';
$.each(d.order, function(k, v) {
if (v.dir == 'desc') {
ordering = '-';
}
if (d.columns[v.column].data == 'client_obj') { // catch ordering on client_obj column
d.columns[v.column].data = 'client__name'; // convert it to 'client__name' field expected by DFR endpoint
}
ordering += d.columns[v.column].data
});
d.ordering = ordering;
d.search = d.search.value;
},
"dataFilter": function(data) {
// Map DRF field names to Data Tables field names
// DRF `count` becomes DataTables `recordsTotal`
// DRF `count` becomes DataTables `recordsFiltered`
// DRF `results` becomes DataTables `data`
var json = jQuery.parseJSON(data);
json.recordsTotal = json.count;
json.recordsFiltered = json.count;
json.data = json.results;
return JSON.stringify(json); // return JSON string
},
},
columns: [
{data: 'col1'},
{data: 'col2'},
{data: 'col3'}
]
});
</script>
</body>
</html>
此示例还包括如何使用 DRF 包含的 Token Auth 为 Token Authentication 发送 token ，但如果您不需要身份验证，则不需要它。我希望这可以帮助您走上正轨。祝你好运!
关于javascript - 大型 jquery 数据表使用 django 很慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57717721/