将超链接添加到数据表时遇到问题

Question

我有一个使用jQuery DataTables作为项目列表视图的Django应用。 现在，我试图将超链接添加到表的第一个元素，这是我正在显示的模型的主键。 目的是通过链接将您带到模型实例的详细视图。 我有我认为应该工作的东西，但是它给我数据表中的每个项目“未定义”的内容，并且在单击它时引发错误。 我认为这只是没有获取模型实例的ID。

我已经尝试过可以想到的render函数的任何变体，但是我是javascript新手，所以我有点迷路了。 我非常有信心，一旦解决了这个问题，我的应用程序便会运行。

这是我的html：

{% extends "app/layout.html" %}
{% block content %}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Part Requests</title>

</head>


<body>

    <h1>Part Orders</h1> 
    <a class="btn btn-info" style="float:right" href="{% url 'New_Order' %}">&nbsp; New Part Order &nbsp;</a>
    <br /><br />
    <div class="table-responsive">
        <table id="PartOrders" class="table table-hover">
            <thead>
                <tr>
                    <th>Order #</th>
                    <th>Priority</th>
                    <th>Part Number</th>
                    <th>Part Description</th>
                    <th>Quantity</th>
                    <th>Order Date</th>
                    <th>Unit Name</th>
                    <th>UIC</th>
                    <th>End Item</th>
                    <th>Reason For Order</th>
                </tr>
            </thead>
        </table> 
    </div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<script>
    $(document).ready(function() {
        $.get('/api/Order',
            function(data) {
                $('#PartOrders').DataTable( {
                    "data": data,
                    "columns": [
                        { 'data': 'id', 'name': 'id',
                                "render": function(data, type, full) {
                                return '<a href="/order/'+ full.path + '">' + data.id +' </a>';
                            }
                        },
                        { 'data': 'Priority', 'name': 'Priority' },
                        { 'data': 'PartNumber', 'name': 'Part Number' },
                        { 'data': 'PartDescription', 'name': 'Nomenclature' },
                        { 'data': 'Quantity', 'name': 'Quantity' },
                        { 'data': 'OrderDate', 'name': 'Order Date' },
                        { 'data': 'UnitName', 'name': 'Unit Name' },
                        { 'data': 'UIC', 'name': 'UIC' },
                        { 'data': 'EndItem', 'name': 'Aircraft' },
                        { 'data': 'ReasonForOrder', 'name': 'Reason For Order' }

                    ]                    
                });
            });
        });




</script>
</body>
</html>

{% endblock %}

{% block js %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>



{% endblock js %}

这是我的模型，以防万一：

class PartOrder(models.Model):
    id = models.AutoField(primary_key=True)
    Priority = models.CharField(max_length=20, choices=(('AOG','AOG'),('Rush','Rush'),('Planned','Planned')))
    PartNumber = models.CharField(max_length=35)
    PartDescription = models.CharField(max_length=200)
    SerialNumber = models.CharField(max_length=35)
    UnitOfMeasure = models.CharField(max_length=35)
    Quantity = models.PositiveIntegerField(validators=[MinValueValidator(1)])
    OrderDate = models.DateTimeField(auto_now=True)
    UnitName = models.CharField(max_length=35)
    UIC = models.CharField(max_length=6)
    ShippingAddress = models.CharField(max_length=200)
    TimeSinceNew = models.CharField(max_length=35)
    EndItem = models.CharField(max_length=20, choices=(('UH-72A','UH-72A'),('44301-10-7 Hoist','44301-10-7 Hoist')))
    AircraftSN = models.CharField(max_length=7)
    AircrafTime = models.DecimalField(max_digits=5, decimal_places=2)
    Engine1SN = models.CharField(max_length=12)
    Engine1_TSN = models.DecimalField(max_digits=5, decimal_places=2)
    Engine2SN = models.CharField(max_length=12)
    Engine2_TSN = models.DecimalField(max_digits=5, decimal_places=2)
    ReasonForOrder = models.CharField(max_length=200)
    RequestedBy = models.CharField(max_length=35)

    class Meta:
            ordering = ['Priority']

Answer 1

我认为，您应该参考render回调的第一个参数：

render: function (data, type, full) => `<a href="/order/${data.path}">${data.id}</a>`

除此之外，我建议使用DataTables选项ajax而不是将代码与自己的$.get()成功回调包装在一起-它将为您提供更大的灵活性，并更好地与DataTables API集成。
DataTables / jQuery文件通常包含在页面的<head>部分中；
在加载所有必需文件之前出现的普通表头看起来很烦人，因此您可以将DataTables初始化目标节点设置为简单：

<table id="PartOrders" class="table table-hover"></table>

数据表将填充适合您（包括头，你只需要改变columns.name的选项columns.title ）

将超链接添加到数据表时遇到问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-05-27 08:40:17

将超链接添加到数据表时遇到问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-05-27 08:40:17

解决方案1
1 已采纳 2019-05-27 08:40:17