如何解决django-rest-framework datatables列中断表
第1部分
我的数据表可用于obj迭代,但是我将移至DRF-datatables ..尽管我使示例站点运行正常,但最终的实际实现却步入正轨。基本上,我整个周末都在显示一个似乎正在加载数据的表(因为分页显示了正确的信息),但是我的行全为空白: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数据表吗?我的最终目标是能够选择多个行,然后为所有这些条目编辑交易。
最终目标示例
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,blank=True)
symbol = models.ForeignKey(Symbol,on_delete=models.SET_NULL,null=True)
created_by = models.ForeignKey(User,editable=False,on_delete=models.CASCADE)
解决方法
我什至需要使用DRF数据表吗?
仅在使用服务器端处理时(如目前),才需要DRF数据表。除非您需要支持大型数据集(数千行),否则您可能不需要服务器端处理。
如果结果集大小在100s以内,则坚持使用模板渲染。
我的最终目标是能够选择多行,然后为所有这些条目编辑交易。
使用Datatables和JQuery绝对可以做到这一点。 datatables-select插件会有所帮助。但这很棘手(如您所见)。在开始编码之前,请尝试阅读并理解文档和示例-从长远来看,这肯定会节省您的时间。
更新
如果它不起作用...
-
尝试自行调用API URL。它返回正确的数据吗?
-
确保列名与从API调用返回的名称匹配。这可能很棘手-确保您清楚API响应的结构以及声明了columns correctly。
-
也许从一个简单的列开始,然后让它开始工作。然后添加新列。
-
在
drf datatables
中设置断点-逐步检查是否有任何故障或错误。 -
下载并运行DRF DataTables example app-使用有效的实现可能会帮助您找出问题所在。
它肯定会工作(我已经在Django / DRF Datatables中使用过数据表)-但是首先要设置它会很棘手。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。