Tailwind Metronic Datatable with search
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 :
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);Replies (4)
Hi
Here's how you can add a search input to your Datatable:
<pre> <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> </pre>This setup allows you to create a custom search input. When the user types in the input field, the keyup event triggers the search function, filtering the data in the datatable based on the input value.
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
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
