datatables - 数据表：缺少页面元素（排序、搜索、下一个...）

问题描述

我正在设置我的第一个 DataTables 页面，虽然表格显示并格式化，但大多数附加元素都丢失了（排序列、搜索、下一个/上一个...）。我检查了文档，遵循了教程，但仍然卡住了，我只能找到 browserś (Chrome) 浏览器中的一个无法理解的错误。

我的 HTML 文件（从 jinja 模板获取数据）：

<head>
  <title>Test DataTable</title>
  <meta charset="utf-8">

  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

  <script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable();
    } );
  </script>

</head>

<table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th>{{_('Prod Code')}}</></th> 
        <th>{{_('Description')}}</th>          
        <th>{{_('Units')}}</th>
        <th>{{_('Category')}}</th> 
        <th></th>
      </tr>
  </thead>
  <tbody>
      {% for each_product in products %}
      <tr>
        <td> {{ each_product.prod_code }} </a></td>
        <td> {{ each_product.prod_desc }} </td>
        <td> {{ each_product.prod_units }} </td> 
        <td> {{ each_product.prod_Category }} </td>    
      </tr>       
    {% endfor %}  
  </tbody>
</table>

下面是浏览器中页面的截图。当我将鼠标悬停在它们上方时，这些行变为浅灰色。

这是浏览器控制台中错误的屏幕截图：

有什么我想念的想法吗？

谢谢！

标签： datatables

datatables - 数据表：缺少页面元素（排序、搜索、下一个...）

问题描述

解决方案

推荐阅读