Javascript Django模板破坏数据表
我试图在Django应用程序中实现一个基本的DataTables表。仅当模板中未包含“我的模板”变量时，它才会完全呈现：Javascript Django模板破坏数据表,javascript,jquery,python,django,datatables,Javascript,Jquery,Python,Django,Datatables,我试图在Django应用程序中实现一个基本的DataTables表。仅当模板中未包含“我的模板”变量时，它才会完全呈现： current_orders.html {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jq
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>
to{{}}从ChromeDevTools中，我可以看到有一个错误，但我对JavaScript的了解很少，这让我感到困惑。在网上看这似乎不是一个常见的问题，所以我的假设是我缺少一些基本的东西。任何帮助都将不胜感激
Chrome开发工具错误 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");
g.slice（）；q=[]；g=这个.getElementsByTagName（“thead”）；0!==g、 长度&（fa（o.aoHeader，g[0]），q=qa（o））；if（null==e.aoColumns）
{p=[]；g=0；
对于（i=q.length；g您的标题仅包含16列，而正文包含17列。请确保列数匹配，否则DataTables会混淆并抛出错误。这可能是无关的，但我看到正文中有17列，而标题中只有16列。当表格格式不正确时，DataTables很容易被破坏。这只是乍一看，也许我没有看到什么…哦，该死的。是的，就是这样，谢谢！！！你怎么看的？这是你刚刚检查过的东西，还是你异常专注？也许我想得太多了/太复杂了？我真的很感兴趣，因为我只是在这个简单的错误上浪费了很多时间。我寻找的唯一原因是我这是因为我过去在数据表方面也遇到过类似的问题。只要所有元素都在那里，它就工作得很好，否则它就根本不工作。你发布的错误让我觉得缺少了什么，所以我检查了一下。不是说得太哲学，但我想我们都有过——10%的工作需要90%的时间。然后我当你开始在你的错误和修正中看到模式后，我越来越相信整个业务只是一堆模式。。。
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");