Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

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");
}

<!--begin::Row-->
<div class="row gx-5 gx-xl-10">
<!--begin::Col-->
<div class="col-xl-12">
<table id="kt_datatable_zero_configuration" 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>


D
David 1 year ago
Metronic Asp.Net Core Datatables
8 Answers
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)

D
David 1 year ago

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>


D
David 1 year ago

I have also added this to Master.cshtml.


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


D
David 1 year ago

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


user
Lauris Stepanovs Author1 year ago

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


D
David 1 year ago

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?


D
David 1 year ago

Example - Searchable Datatable


D
David 1 year ago

Nevermind, I got it to work by removing 

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


user
Lauris Stepanovs Author1 year ago

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