django-rest-框架数据可测数据列中断表

Question

第1部分

我让datatable使用obj迭代，但我要迁移到DRF-数据。虽然我的示例站点运行没有问题，但实际的实现在我头上却让我大吃一惊。基本上，我整个周末都要显示一个似乎正在加载数据的表(因为分页显示的是正确的信息)，但是我的行都是空的：https://i.imgur.com/ImA23Zo.png。

然后，我尝试在脚本中添加“列”部分，这会破坏整个表：https://i.imgur.com/ykwf58P.png

如果我将ajax调用更改为

"ajax": "/api/entry/?format=datatables",

然后，我得到了最接近工作的表：https://i.imgur.com/p5G5uzk.png -但是问题仍然是行是空的，如果我添加cols，那么所有的东西都会中断。

我哪里出问题了？我也没有收到任何错误消息，所以很难调试数据。

也许第2部分.

我需要去买DRF数据吗？我的最终目标是能够选择多行，然后编辑所有这些条目的交易。

最终目标的例子

1. 选择3项贸易
2. 单击表顶部的下拉列表。
3. 从下拉列表中选择贸易PK
4. 单击保存
5. 表显示最新数据。

entry_list.html

{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h2 class="text-gray-800">{% block title %}{% trans "Imported Entries" %}{% endblock %}</h2>
    <a role="button" class="btn btn-success" href="{% url 'import' %}"><i
            class="fas fa-plus-circle"></i> Import New Entires</a>
</div>


<!-- Content Row -->
<div class="row">
    <div class="col-md-12">
        <table id="entrytable"
               class="table-hover table display"
               align="center"
               style="width:100%">
            <thead>
            <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">ID
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Date
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Trade
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Type
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Symbol
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Amount
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Price
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Fee
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Reg Fee
                </th>
                <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                    colspan="1" aria-label="" style="">Ref
                </th>
            </tr>
            </thead>

        </table>
    </div>
</div>

{% endblock %}


{% block js %}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>
<!--https://datatables.net/examples/server_side/select_rows.html-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>


<script>

$(document).ready(function() {
    var selected = [];

    $("#entrytable").DataTable({
        "order": [[ 1, "desc" ]],
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/api/entry/?format=datatables",
            "type": "POST",
            "beforeSend": function(xhr) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token|escapejs }}");
            }
        },
        "columns": [
            {"data": "pk"},
            {"data": "date"},
            {"data": "trade.id"},
            {"data": "entry_type"},
            {"data": "symbol"},
            {"data": "amount"},
            {"data": "price"},
            {"data": "fee"},
            {"data": "reg_fee"},
            {"data": "transaction_id"},
        ]
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        }
    });

    $('#entrytable tbody').on('click', 'tr', function () {
        var id = this.id;
        var index = $.inArray(id, selected);

        if ( index === -1 ) {
            selected.push( id );
        } else {
            selected.splice( index, 1 );
        }

        $(this).toggleClass('selected');
    } );
} );


</script>

{% endblock %}

Serializers.py

class EntrySerializer(serializers.ModelSerializer):
    class Meta:
        model = Entry
        fields = '__all__'

Views.py

class EntryViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Entry.objects.all()
    serializer_class = EntrySerializer
    permission_classes = [permissions.IsAdminUser]
    filter_backends = (DjangoFilterBackend, OrderingFilter,)

models.py

class Entry(models.Model):
    ENTRY = 'entry'
    EXIT = 'exit'
    ENTRY_TYPE_CHOICES = [
        (ENTRY, 'Entry'),
        (EXIT, 'Exit'),
        # (DIVIDEND_RECEIVED, 'Dividend Received'),
        # (DIVIDEND_SOLD, 'Dividend Sold'),
    ]

    class Meta:
        verbose_name = "Entry"
        verbose_name_plural = "Entries"

    trade = models.ForeignKey(Trade, on_delete=models.CASCADE, null=True, blank=True)
    date = models.DateTimeField(null=True, blank=True, default=datetime.datetime.now)
    amount = models.FloatField(null=True)
    price = models.FloatField(null=True)
    fee = models.FloatField(null=True, blank=True)
    entry_type = models.CharField(max_length=5, choices=ENTRY_TYPE_CHOICES, default=ENTRY)
    reg_fee = models.FloatField(null=True, blank=True)
    transaction_id = models.CharField(max_length=100, null=True, blank=True)
    symbol = models.ForeignKey(Symbol, on_delete=models.SET_NULL, blank=True, null=True)
    created_by = models.ForeignKey(User, null=True, blank=True, editable=False, on_delete=models.CASCADE)

Answer 1

我需要去买DRF数据吗？

只有在使用服务器端处理时才需要DRF数据(就像现在一样)。除非您需要支持大型数据集(1000 s行)，否则可能不需要服务器端处理。

如果您的结果集大小是在1000，然后坚持模板渲染。

我的最终目标是能够选择多行，然后编辑所有这些条目的交易。

这是绝对有可能做到这一点与数据和JQuery。可数据-选择插件将有所帮助。但这很棘手(正如你所发现的)。在开始编写代码之前，试着阅读和理解文档和示例--从长远来看，这肯定会节省您的时间。

更新

如果不起作用..。

1. 尝试单独调用API。它返回正确的数据吗？
2. 确保列名与API调用返回的名称相匹配。这可能是很棘手的--确保您清楚地了解了API响应是如何构造的，并且您已经声明了列正确。
3. 也许从一个简单的列开始，首先让它起作用。然后添加新列。
4. 在drf datatables中设置断点-逐步完成并查看是否有任何故障或错误。
5. 下载并运行DRF DataTables示例应用程序 --拥有一个有效的实现可以帮助您隔离出问题所在。

它肯定会工作(我在Django / DRF数据表中使用了数据)--但一开始设置起来可能很困难。