readyException.js：6 Uncaught TypeError：无法读取未定义的属性“mData”答案

【问题标题】：readyException.js:6 Uncaught TypeError: Cannot read property 'mData' of undefinedreadyException.js：6 Uncaught TypeError：无法读取未定义的属性“mData”
【发布时间】：2020-05-07 22:04:25
【问题描述】：

我在使用 Rails 6.0.0 上的数据表时遇到问题

我使用了数据表 CDN，样式发生了变化，但数据表的功能没有加载。

这是我的html

<table id="example" class="title table index-table">
  <tr>
    <th>Title</th>
    <% if @user['role'] === 'admin'  or @user['role'] === 'instructor' %>
      <th>Tags</th>
    <% end %>
  </tr>
  <% @assignments.each do |hw| %>
    <tr>
      <% if @user['role'] === 'admin'  or @user['role'] === 'instructor' %>
        <td>
          <span class="hw-title"><%= link_to hw.title, assignment_path(hw) %></span>
        </td>
      <% else %>
        <td>
          <span class="hw-title"><%= link_to hw.title, new_assignment_solution_path(hw) %></span>
        </td>
      <% end %>
      <% if @user['role'] === 'admin'  or @user['role'] === 'instructor' %>
        <td>
          <% if hw.tags.empty? %>
            <em></em>
          <% else %>
            <% hw.tags.each do |tag| %>
              <% unless tag.name.include? ' ' %>
                <span class="hw-tag">#<%= tag.name %></span>
              <% else %>
                <% words = tag.name.split(' ') %>
                <% words.each do |word| %>
                  <span>
                    #<%= word.strip %>
                  </span>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        </td>
      <% end %>
    </tr>
  <% end %>
</table>

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

这是 application.html.erb 中的脚本

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

是一个简单的表格，但它有一些验证，这使得标签不等于任何线索？谢谢

【问题讨论】：

标签： javascript jquery html ruby-on-rails datatable

【解决方案1】：

解决了。我只需要添加<thead> 和<tbody> 标签让我知道这是否对某人有用

<table id="example" class="title table index-table">
  <thead>
    <tr>
      <th>Title</th>
      <% if @user['role'] === 'admin'  or @user['role'] === 'instructor' %>
        <th>Tags</th>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% @assignments.each do |hw| %>
      <tr>
        <% if @user['role'] === 'admin'  or @user['role'] === 'instructor' %>
          <td>
            <span class="hw-title"><%= link_to hw.title, assignment_path(hw) %></span>
          </td>
        <% else %>
          <td>
            <span class="hw-title"><%= link_to hw.title, new_assignment_solution_path(hw) %></span>
          </td>
        <% end %>
        <% if @user['role'] === 'admin'  or @user['role'] === 'instructor' %>
          <td>
            <% if hw.tags.empty? %>
              <em></em>
            <% else %>
              <% hw.tags.each do |tag| %>
                <% unless tag.name.include? ' ' %>
                  <span class="hw-tag">#<%= tag.name %></span>
                <% else %>
                  <% words = tag.name.split(' ') %>
                  <% words.each do |word| %>
                    <span>
                      #<%= word.strip %>
                    </span>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          </td>
        <% end %>
      </tr>
    <% end %>
  </tbody>

</table>

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

【讨论】：