时间戳

首页 > 解决方案 > 使用 django 处理大型 jquery 数据表很慢

javascript - 使用 django 处理大型 jquery 数据表很慢

问题描述

我正在通过 django 显示一个 20k 行的 jquery 数据表。渲染非常慢。所以我想知道有什么替代方法可以更快地处理它，例如，通过延迟渲染，只加载显示的部分？数据库在sql中。

我在数据表选项中尝试将 deferRender 和 serverSide 选项设置为 true，但它仍然很慢。我了解这些选项仅在通过 AJAX 调用数据时才有效。数据表网站中给出的示例只是将 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>

标签： javascriptjquerydjangodatatablesbootstrap-4

解决方案

正如评论中提到的，20,000 行将花费大量时间让浏览器使用 jQuery DataTables 呈现。您可能想研究使用带有分页加载的 jQuery DataTables。为此，您需要使用 Django REST Framework 之类的东西从 Django 后端提供数据。

在 jQuery 中正确配置是很棘手的。假设您有一个 Django REST Framework 端点，它提供了三个字段，分别来自您的 Django 模型，分别称为col1、col2和。col3这是从名为 的端点逐步加载它的 JavaScript 和 HTML https://example.com/api/my-endpoint/：

<!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 的令牌，但如果您不需要身份验证，则不需要它。我希望这可以帮助您走上正轨。祝你好运！

推荐阅读