title: Using DataTables Plugin in Razor View - Cannot set properties of undefined (setting '_DT_CellIndex') Error
body: <p>I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in <a href="https://datatables.net/" rel="nofollow noreferrer">datatables</a>. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -&gt; HTML (DOM) source data -&gt; and under Javascript tab I entered the lines required.</p>
  <p><strong>Is there something I am doing incorrect here with the script tags or is the plug in just not working?</strong> I do not have the files downloaded and imported to my project.</p>
  <p>Expecting a standard look like this <a href="https://i.stack.imgur.com/eAaPa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eAaPa.png" alt="enter image description here" /></a></p>
  <p>But am getting this... so I am missing the look of the datatable plugin and the following Error.</p>
  <blockquote>
  <p>Cannot set properties of undefined (setting '_DT_CellIndex')</p>
  </blockquote>
  <p>my view:</p>
  <pre><code>@model List&lt;Fright&gt;
  
  
  @{
      ViewData[&quot;Title&quot;] = &quot;Home Page&quot;;
       var result = Model.GroupBy(gb =&gt; gb.Value);
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;
      &lt;link href=&quot;//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
      &lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot; src=&quot;//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js&quot; defer&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function () {
              $('#homeTable').DataTable();
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;table id=&quot;homeTable&quot; class=&quot;display&quot; style=&quot;width:100%&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Value&lt;/th&gt;
                      &lt;th&gt;Option&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  @foreach (var item in result)
                  {
                      var url = &quot;/frightSummary/SummaryIndex?id=&quot; + item.Key;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;a href=@url&gt;@item.Key&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
  
                  }
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>