Datatables select search
Hello,
How can I filter using Select?
<input placeholder="Search" type="text" data-datatable-search="#kt_companies_table"/>
I use this successfully. But I also need the select option.
Can you help?
Replies (2)
Hi Hüsame Özçelik,
You can use TypeScript or JavaScript code to apply a filter using a select dropdown. Here's how you can do it with the DataTables API:
this.dataTable
.setFilter({
column, // Specify the column index or name
type: "select", // Use "select" for dropdown filtering
value: "selected option value", // The value selected from the dropdown
})
.redraw();Add a dropdown for filtering:
<select >
<option value="">All</option>
<option value="Value1">Value1</option>
<option value="Value2">Value2</option>
</select>Attach an event listener to the dropdown to update the filter:
document.getElementById("filter-select").addEventListener("change", function () {
const selectedValue = this.value;
this.dataTable
.setFilter({
column: 1, // Adjust the column index
type: "select",
value: selectedValue,
})
.redraw();
});You can find example code for this approach in:
/metronic-tailwind-html/src/app/datatables/current-sessions.jsExample page:
/metronic-tailwind-html/dist/html/demo1/account/security/current-sessions/index.htmlLet me know if you need further assistance!
Thanks so much for your help. I got this working. There's just one problem. If it does not find any results in the filter and I change the filter again, it does not make a request and the table is not redrawn. Do you have any knowledge on this subject? The event is listened to and the value is reflected in the console, but no drawing is made.
document.getElementById("status-filter").addEventListener("change", function () {
const selectedValue = this.value;
dataTable.setFilter({
column: "status",
type: "select",
value: selectedValue,
}).redraw();
});
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
