Question

我正在尝试在我的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})

这将很乐意呈现一张桌子，但没有额外的好处;搜索栏，分页，排序箭头等。但是，当我从<tr> to </tr>删除带有<tbody>模板变量的{{ }}行时，这些元素呈现正常。
从chrome DevTools我可以看到有一个错误，但我的JavaScript知识很少，而且让我感到难过。在网上看这似乎不是一个常见的问题所以我的假设是我缺少一些基本的东西。任何帮助将不胜感激。

Chrome DevTools error

未捕获的TypeError：无法读取属性＆＃39; mData＆＃39;的 undefined（匿名函数）@ 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");

Answer 1

您的标题只包含16列但您的正文包含17.使列数匹配，否则DataTables会混淆并引发错误。

Django模板打破DataTable

1 个答案: