Datatables not working

I have downloaded the ASP.NET Core project. On the index page I have this code and the datatable is not working. Thank you for your help.

@{
ViewData["Title"] = "Dashboard";
KTTheme.addVendor("datatables");
}








Name
Position
Office
Age
Start date
Salary




Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800


Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750


Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000


Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800


Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750


Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000


Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800


Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750


Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000


Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800


Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750


Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000




Name
Position
Office
Age
Start date
Salary





$("#kt_datatable_zero_configuration").DataTable();

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)

I have also attempted to add the widgets.bundle.js

@{
ViewData["Title"] = "Dashboard";

KTTheme.addVendor("datatables");
KTTheme.addJavascriptFile("js/widgets.bundle.js");
}

<!--begin::Row-->
<div class="row gx-5 gx-xl-10">
<!--begin::Col-->
<div class="col-xl-12">
<table class="table table-row-bordered gy-5">
<thead>
<tr class="fw-semibold fs-6 text-muted">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<!--end::Col-->
</div>
<!--end::Row-->

<script type="text/javascript">
$("#kt_datatable_zero_configuration").DataTable();
</script>

I have also added this to Master.cshtml.

<script>var hostUrl = "/assets";</script>

Also note I was unable to run these steps as I am behind a proxy and wasn't able to but I don't think they are absolutely necessary.

Getting Started

Hi David,

We are using KTTheme.addVendor("datatables") to include datatables js and CSS files for dashboard view.

Can you try to move the datatable initialization code to the page load event?

window.addEventListener('load', (event) => {
$("#kt_datatable_zero_configuration").DataTable();
});

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Lauris,

Thank you! That seemed to do the trick. Sorting and paging are working. However, the search capability is not showing. I'm pretty sure search was a default capability with datatables. How do we enable the search capability?

Nevermind, I got it to work by removing

<script>var hostUrl = "/assets";</script>
from Master.cshtml

Glad to hear that. hostUrl is required only for some of our js files if you are using your own datatable initialization then this variable is not required.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(