[英]Having trouble adding a hyperlink to a datatable
我有一個使用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' %}"> New Part Order </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']
我認為,您應該參考render
回調的第一個參數:
render: function (data, type, full) => `<a href="/order/${data.path}">${data.id}</a>`
ajax
而不是將代碼與自己的$.get()
成功回調包裝在一起-它將為您提供更大的靈活性,並更好地與DataTables API集成。 <head>
部分中; <table id="PartOrders" class="table table-hover"></table>
數據表將填充適合您(包括頭,你只需要改變columns.name
的選項columns.title
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.