Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$ 
Search in DataTable
Hello,
I am using Metronic v9.0.4 with my angular project and my DataTable is working fine with sort, pagination. How do I enable search for my DataTable?
<ng-template #dataTable2>
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="my_new_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="text-center">
<span class="sort">
<span class="sort-label">Device ID</span>
<span class="sort-icon"></span>
</span>
</th>
<th class="text-center">
<span class="sort">
<span class="sort-label">Model Number</span>
<span class="sort-icon"></span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let device of newDevices">
<td class="text-center">{{device.deviceId}}</td>
<td class="text-center">{{device.modelNumber}}</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>
</ng-template>Thanks in advance
Replies (1)
Hi Umair,
Check for the sample TS code in /metronic-tailwind-html/src/app/datatables/allowed-ip-addresses.ts
Add a search input above your datatable.
<input type="text" class="input input-sm pl-8" placeholder="Search Members" data-datatable-search="#your_table_id">Then use js code to trigger search from text input:
const searchElements = document.querySelectorAll<HTMLInputElement>("[data-datatable-search]");
searchElements.forEach((element) => {
// Get the ID of the datatable to be searched
const tableId = element.getAttribute("data-datatable-search");
// Find the corresponding datatable element
const datatable = document.querySelector<HTMLElement>(tableId);
if (datatable) {
// Retrieve the datatable instance once
const dataTableInstance = (datatable as any).instance;
// Add the event listener for the keyup event
element.addEventListener("keyup", () => {
dataTableInstance.search(element.value);
});
}
});Thanks
