Django 模板破坏 DataTable
Posted
技术标签:
【中文标题】Django 模板破坏 DataTable【英文标题】：Django template breaking DataTable 【发布时间】：2015-12-19 11:39:22 【问题描述】：我正在尝试在我的 Django 应用程序中实现一个基本的 DataTables 表。只有当我的模板变量不包含在模板中时，它才会完全呈现：
current_orders.html
% load staticfiles %
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- DataTables.net -->
<link rel="stylesheet" href="% static 'css/jquery.dataTables.min.css' %">
<script src="% static 'js/jquery.dataTables.min.js' %"></script>
<script>
$(document).ready(function()
$('#current_orders_table').DataTable();
);
</script>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.yellow-deep_purple.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table id="current_orders_table" class="display mdl-data-table <mdl-js-data-table></mdl-js-data-table> mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Customer Name</th>
<th>Date order was placed via Email</th>
<th>Opportunity ID</th>
<th>BTMW Reference</th>
<th>Sales Order Number</th>
<th>Supplier PO Numbers</th>
<th>SAS Date of Delivery</th>
<th>Serial Numbers Recorded?</th>
<th>INCare Reference Number</th>
<th>Contract Start Date</th>
<th class="mdl-data-table__cell--non-numeric">INCare Notes</th>
<th class="mdl-data-table__cell--non-numeric">Ongoing Progress</th>
<th class="mdl-data-table__cell--non-numeric">Actual Status of Order</th>
<th>Status Updated</th>
<th>Invoice Raised</th>
<th>Invoice Notes</th>
</tr>
</thead>
<tbody>
% for order in orders %
<tr>
<td class="mdl-data-table__cell--non-numeric"> order.customer </td>
<td> order.order_date </td>
<td> order.op_ref </td>
<td> order.btmw_ref </td>
<td> order.sales_order_number </td>
<td> order.supplier_po_numbers </td>
<td> order.sas_date_of_delivery </td>
<td> order.sas_notes </td>
<td> order.serial_numbers_recorded </td>
<td> order.incare_ref_number </td>
<td> order.contract_start </td>
<td class="mdl-data-table__cell--non-numeric"> order.incare_notes </td>
<td class="mdl-data-table__cell--non-numeric"> order.ongoing_progress </td>
<td class="mdl-data-table__cell--non-numeric"> order.actual_status </td>
<td> order.status_updated </td>
<td> order.invoice_raised </td>
<td> order.invoice_notes </td>
</tr>
% endfor %
</tbody>
</table>
</body>
</html>
views.py
def current_orders(request):
orders = get_list_or_404(Order, closed=False)
return render(request, 'tracker/current_orders.html',
'orders': orders)
这将愉快地渲染一张桌子，但没有额外的好处；搜索栏、分页、排序箭头等。然而，当我从 <tbody> 中删除 <tr> to </tr> 行时，那些带有 模板变量的行，这些元素渲染得很好。
从 chrome DevTools 我可以看到有一个错误，但我的 javascript 知识很少，这让我很难过。在网上看这似乎不是一个常见的问题，所以我的假设是我缺少一些基本的东西。任何帮助将不胜感激。
Chrome DevTools error
未捕获的类型错误：无法读取属性“mData” 未定义（匿名函数）@ jquery.dataTables.min.js:92m.extend.each @ jquery.js:384m.fn.m.each @ jquery.js:136（匿名函数）@ jquery.dataTables.min.js:92m.extend.each @ jquery.js:384m.fn.m.each @ jquery.js:136m@jquery.dataTables.min.js:85h.fn.DataTable@ jquery.dataTables.min.js:163（匿名函数）@ (索引):18m.Callbacks.j@jquery.js:3148m.Callbacks.k.fireWith@ jquery.js:3260m.extend.ready@jquery.js:3472J@jquery.js:3503
和dataTables.min.js的第92行：
g.slice());q=[];g=this.getElementsByTagName("thead");0!==g.length&&(fa(o.aoHeader,g[0]),q=qa(o));if(null===e.aoColumns)
p=[];g=0;
for(i=q.length;g<i;g++)
p.push(null)
else
p=e.aoColumns;g=0;
for(i=p.length;g<i;g++)
Ga(o,q?q[g]:null);
hb(o,e.aoColumnDefs,p,function(a,b)
la(o,a,b));
if(s.length)
var u=function(a,b)
return a.getAttribute("data-"+b)!==null?b:null
;
h(s[0]).children("th, td").each(function(a,b)
var c=o.aoColumns[a];
if(c.mData===a)
var d=u(b,"sort")||u(b,"order"),e=u(b,"filter")||u(b,"search");
【问题讨论】：
这可能无关，但我在正文中看到 17 列，而在标题中只看到 16 列。当表格格式不正确时，DataTables 很容易损坏。这只是乍一看，也许我什么都没看到...... 哦，该死的。是的，就是这样，谢谢！！！ 【参考方案1】：你的 header 只包含 16 列，但你的 body 包含 17 列。使列数匹配，否则 DataTables 会混淆并抛出错误。
【讨论】：
你是怎么看到的？这是您刚刚检查的内容，还是您异常专心？也许我过度思考/过度复杂化这些事情？我真的很感兴趣，因为我只是在这个简单的错误上浪费了很多时间。 我寻找它的唯一原因是因为我过去在 DataTables 上遇到过类似的问题。只要你所有的元素都在那里，它就很好用，否则它根本不起作用。你发布的错误让我觉得有什么遗漏，所以我检查了。不要太哲学化，但我认为我们都经历过——10% 的工作需要 90% 的时间。然后稍后你开始看到你的错误和他们的修复模式。我越来越相信整个业务只是一堆模式......以上是关于Django 模板破坏 DataTable的主要内容，如果未能解决你的问题，请参考以下文章
Django 无空格模板标签会破坏 Bootstrap 呈现的内容