readyException.js:6 Uncaught TypeError: Cannot read property 'mData' of undefined

Question

I am having problems with Data tables on Rails 6.0.0

I used the Data tables CDN, the styles changed but the functionalities of data tables are not loading.

this is my 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>

this is the script in the 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>

is a simple table but it has some validations, which makes the tags unequal to the any clues? Thanks

Answer 1

Solved it. I just needed to add <thead> and the <tbody> tags Let me know if this worked for somebody

<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>