向数据表添加超链接时遇到问题
Posted
技术标签:
【中文标题】向数据表添加超链接时遇到问题【英文标题】：Having trouble adding a hyperlink to a datatable 【发布时间】：2019-10-12 00:06:18 【问题描述】：我有一个 Django 应用程序，它使用 jQuery DataTables 作为项目的列表视图。现在我正在尝试向表的第一个元素添加一个超链接，该元素是我正在显示的模型的主键。该链接旨在将您带到模型实例的详细视图。我有我认为应该工作的东西，但它给了我数据表中每个项目的“未定义”，当你点击它时会抛出一个错误。我认为它只是没有获取模型实例的 ID。
我已经尝试过任何我能想到的渲染函数变体，但我是 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']
【问题讨论】：
【参考方案1】：我想，你应该参考render回调的第一个参数：
render: function (data, type, full) => `<a href="/order/$data.path">$data.id</a>`
ajax，而不是使用您自己的 $.get() 成功回调来包装您的代码 - 它会为您提供更大的灵活性并更好地与 DataTables API 集成；
DataTables/jQuery 文件通常包含在页面的<head> 部分；
在加载所有必要文件之前出现的普通表头可能看起来很烦人，因此您可以将 DataTables 初始化目标节点设置为如下简单：
<table id="PartOrders" class="table table-hover"></table>
DataTables 将为您填充（包括标题，您只需将 columns.name 选项更改为 columns.title）
【讨论】：
以上是关于向数据表添加超链接时遇到问题的主要内容，如果未能解决你的问题，请参考以下文章