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


<div class="row gx-5 gx-xl-10">

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

</div>


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

David 3 years ago

Metronic Datatables Asp.Net Core

8 Answers

Text formatting options

Private reply Submit

Click any option to insert into your comment. Select text first to wrap it.

**text** to make things bold
*text* to emphasize
### Heading to make headings
[link text](url) for links
![alt text](image-url) to paste in an image
- item to make a list
1. item to make an ordered list
> quote to quote somebody
`code` for single line of code
```js ... ``` for JS code block
```html ... ``` for HTML code block
```scss ... ``` for SCSS code block
```php ... ``` for PHP code block
--- for a horizontal rule
:)
:|
:(

Replies (8)

Lauris Stepanovs Author 3 years 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

David 3 years 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?

David 3 years ago

Example - Searchable Datatable

David 3 years ago

Nevermind, I got it to work by removing

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

from Master.cshtml

Lauris Stepanovs Author 3 years 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.

David 3 years 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

David 3 years ago

I have also added this to Master.cshtml.

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

David 3 years 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>

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Datatables not working

Replies (8)

Your Support Matters!

Metronic

Products

Legal

Stay Connected