<div data-datatable="true" data-datatable-page-size="-1" id="test_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border text-center" data-datatable-table="true">
<thead>
<tr>
<th class="w-[50px]">
<span class="sort asc">
<span class="sort-label">
#
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[100px]">
<span class="sort asc">
<span class="sort-label">
{{ "user.username_label" | trans }}
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[100px]">
<span class="sort">
<span class="sort-label">
{{ "user.status_label" | trans }}
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[100px]">
<span class="sort">
<span class="sort-label">
{{ "user.created_at_label" | trans }}
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[100px]">
{{ "user.action_label" | trans }}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
6 Aug, 2024
</td>
<td>
HR Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
22 Jul 2024
</td>
<td>
Guy Hawkins
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
<span class="badge badge-dot size-2 bg-danger">
</span>
</td>
<td>
18 Jul, 2024
</td>
<td>
Sales Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
15 Jul, 2024
</td>
<td>
Sales Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
5
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
6
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
7
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
8
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
9
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
10
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
11
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
12
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
13
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
14
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
15
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
16
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
17
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
18
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
19
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
20
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
21
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
22
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
23
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
24
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
25
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
26
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
27
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
28
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
<tr>
<td>
29
</td>
<td>
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#update_user_modal">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
<a class="btn btn-sm btn-icon btn-clear btn-light" data-modal-toggle="#summary_user_domain_modal">
<i class="ki-filled ki-category">
</i>
</a>
</td>
</tr>
</tbody>
</table>
const datatableEl = document.querySelector("#test_datatable");
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
datatable.reload();
datatable.showSpinner();
Hi,
We couldn't display the image. Could you please check the console log for any errors?
If you're building the table using HTML and including the [data-datatable="true"] attribute, there's no need to manually reinitialize it with a new KTDataTable instance in JavaScript. The [data-datatable="true"] attribute will automatically initialize the DataTable.
Let us know if you need further assistance.
Thanks!
Hi, can u try copy the link to your browser and open it? That image is my console. It show no error at all.
I try with both method, when there is no data in the table, "No record" wont be show automatically. But i try to play around with show how many record per page (on the webpage, not html code), "no record" will be display.
Hi
"No record" will be handled automatically. Let us know if you find any issues with it.
Thanks
hi, my datatable if no record, "No record" wont show automatically. I tried to change the data-datatable="false" to data-datatable="true", it still cannot work. Image below is my console. u can have a look on it.
image : https://postimg.cc/K1HQgyPz
<div data-datatable="false" >
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for eachUser in user %}
<tr>
<td>{{loop.index}}</td>
<td>bla bla bla</td>
<td>bla bla bla</td>
<td>bla bla bla</td>
</td>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true"
</div>
</div>
</div>
Hi
Could you please try to clear browser cache?
Thanks
Hi, thx for the reply. It works well. Beside that, how to handle no record in datatable?
<script>
const datatableEl = document.querySelector("#domainDatatable");
const options = {
infoEmpty : "<p style="text-align:center;">No records found</p>"
};
const datatable = new KTDataTable(datatableEl, options);
</script>
<div data-datatable="false" >
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for eachUser in user %}
<tr>
<td>{{loop.index}}</td>
<td>bla bla bla</td>
<td>bla bla bla</td>
<td>bla bla bla</td>
</td>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true"
</div>
</div>
</div>