title: JQuery data table not working in my Blazor and .NET core project
body: <p>I am trying to use JQuery datatable in my blazor project. I am using the CDN files to load the framework. This is my <strong>_Host.cshtml</strong> file: </p>
  
  <pre><code>@page "/"
  @namespace Blazor.Pages
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Blazor&lt;/title&gt;
      &lt;base href="~/" /&gt;
      &lt;environment include="Development"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /&gt;
      &lt;/environment&gt;
      &lt;environment exclude="Development"&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                asp-fallback-href="css/bootstrap/bootstrap.min.css"
                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
                crossorigin="anonymous"
                integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" /&gt;
      &lt;/environment&gt;
      &lt;link href="css/site.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;app&gt;
          @(await Html.RenderComponentAsync&lt;App&gt;
              ())
          &lt;/App&gt;
          &lt;script src="_framework/blazor.server.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"
                  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                  crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function () {
                  $('#carTable').DataTable();
              });
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And in my <strong>CarData.razor</strong> file I connect the ID like this:</p>
  
  <pre><code>&lt;table id="carTable" class="display" style="width:100%"&gt;
  </code></pre>
  
  <p>When I run the application it doesn't load the framework. I get <strong>no</strong> error in my console. </p>
  
  <p>I have read about Javascript interop in this documentation: </p>
  
  <p><a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0" rel="noreferrer">https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0</a></p>
  
  <p>Somehow it doesn't read my CDN files from the JQuery datatable. </p>
  
  <p>Can someone point me in the right direction? </p>