title: Datatables in Blazor: Dispose() doesn't work
body: <p>Following a post on <a href="https://datatables.net/forums/discussion/56389/datatables-with-blazor" rel="nofollow noreferrer">DataTables.net</a>, successfully I added DataTables.net on my Blazor WebAssembly across the application. The problem I'm facing is when I change page. As you can see in the following image, for each page with DataTables.net I change, I still have the search bar from the previous page.</p>
  <p><a href="https://i.stack.imgur.com/9Nch6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Nch6.png" alt="enter image description here" /></a></p>
  <p>In the code of each page I added</p>
  <pre><code>public void Dispose()
  {
      JSRuntime.InvokeAsync&lt;bool&gt;(&quot;DataTablesRemove&quot;, &quot;#tableData&quot;);
  }
  </code></pre>
  <p><code>DataTablesRemove</code> is defined in the <code>index.html</code></p>
  <pre><code>function DataTablesRemove(table) {
      $(document).ready(function () {
          $(table).DataTable().destroy();
          // Removes the datatable wrapper from the dom.
          var elem = document.querySelector(table + '_wrapper');
          elem.parentNode.removeChild(elem);
      });
  }
  </code></pre>
  <p>How can I fix this issue?</p>