Below is my html code and also javascript. The search box didt apear and when initialize, the script got error. May i know wat problem is this?
Below is my javascript error, html code and javascript
Image : https://ibb.co/3MYNqZm
Metronic Tailwind Document : https://keenthemes.com/metronic/tailwind/docs/components/datatable
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Static DataTable
<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Push Alerts
</span>
</label>
</div>
<div class="card-body">
<div data-datatable="false" id="my_datatable" data-datatable-page-size="5"
data-datatable-state-save="true">
<div class="scrollable-x-auto">
<table id="" class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-[100px] text-center">
<span class="sort asc">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Last Session
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]">
<span class="sort">
<span class="sort-label">
Label
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]">
<span class="sort">
<span class="sort-label">
<span class="pt-px" data-tooltip="true" data-tooltip-offset="0, 5px" data-tooltip-placement="top">
<i class="ki-outline ki-information-2 text-lg leading-none">
</i>
<span class="tooltip max-w-48" data-tooltip-content="true">
Merchant account providers
</span>
</span>
Method
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[60px]">
</th>
<th class="w-[60px]">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
6 Aug, 2024
</td>
<td>
HR Dept
</td>
<td>
Basic auth
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
</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>
</div>
</div>
</div>
</div>
const datatableEl = document.querySelector("#my_datatable");
const options = {
search: {
/**
* Delay in milliseconds before the search function is applied to the data array
* @default 500
*/
delay: 500, // ms
/**
* Local search callback function
* Filters the data array based on the search string
* @param data Data array to be filtered
* @param search Search string used to filter the data array
* @returns Filtered data array
*/
callback: (data: T[], search: string): T[] => {
if (!data || !search) {
return [];
}
return data.filter((item: T) => {
if (!item) {
return false;
}
return Object.values(item).some((value: string | number | boolean) => {
if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") {
return false;
}
const valueText = String(value).replace(/<[^>]*>| /g, "").toLowerCase();
return valueText.includes(search.toLowerCase());
});
});
}
},
};
const datatable = new KTDataTable(datatableEl, options);
Hi
Here's how you can add a search input to your Datatable:
<div>
<input type="text" class="input input-sm pl-8" placeholder="Search.." data-datatable-search="true">
<table >
<!-- Your table content here -->
</table>
</div>
<script>
const datatableEl = document.querySelector("#my_datatable");
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
const searchElement = document.querySelector("[data-datatable-search="true"]");
if (datatable && searchElement) {
const search = () => {
datatable.search(searchElement.value);
};
searchElement.addEventListener("keyup", search);
}
</script>
I need you to give more information about the error
https://keenthemes.com/metronic/tailwind/docs/components/datatableslope ball
thanks
hi, can u give me an example on how to add search into datatable?
for eg
<div>
<table >
bla bla bla
</table>
</div>
<script>
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
</script>
Hi,
Could you share the exact error message from that line?
Did the error originate from your IDE or the browser?
Thanks
The error is from IDE