Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
Search/Filter function of Datatables in Metronic 9 integration
am trying to apply filter on the remote datatable with KTDatatable.
It is metronic 9.x
I do not see any documentation where I could pass all filter criteria with the apiEndpoint URL. or even a textbox search /.... infact i cant even get the search text box to show up even if i put search:true or search:"a"
I have referred the documentation located at https://keenthemes.com/metronic/tailwind/docs/components/datatable
using it with codeignitor 4
Replies (1)
Hi BizDev Apurva
Sorry for the delay. The KTDataTable component does not automatically generate search input boxes. You need to create these elements yourself in your HTML and connect them to the datatable using data attributes.
Add this HTML before your datatable element:
<!-- Search input for datatable -->
<div class="mb-5">
<input
type="text"
class="form-control"
placeholder="Search..."
data-datatable-search="#kt_remote_table"
/>
</div>
<!-- Your datatable -->
<div ></div>The key attribute is data-datatable-search="#kt_remote_table" which connects the input to your table by its ID.
You need to add this JavaScript code after your datatable initialization:
// Connect search input to datatable
document.querySelectorAll("[data-datatable-search]").forEach((searchElement) => {
const tableId = searchElement.getAttribute("data-datatable-search");
const datatable = document.querySelector(tableId);
if (datatable && datatable.instance) {
searchElement.addEventListener("keyup", () => {
datatable.instance.search(searchElement.value);
});
}
});In your dataTableOptions, you can configure the search behavior:
const dataTableOptions = {
apiEndpoint: apiUrl,
// ... other options
search: {
delay: 500, // Milliseconds to wait before searching after typing stops
// Optional custom search callback for client-side filtering
callback: function(data, search) {
// This is only used for client-side filtering
// For remote, the search term is sent to the server
}
},
// Other options...
};When using a remote data source, the search term is sent to the server as a query parameter. Here's what happens:
- User types in the search box
- After the delay, a request is sent to your API endpoint
- The request includes: ?search=yourSearchTerm&page=1&size=5&...
- Your server should filter the results based on the search parameter
- Return filtered data in the expected format
You can use mapRequest to customize how the request is sent to your endpoint:
const dataTableOptions = {
apiEndpoint: apiUrl,
// ... other options
mapRequest: (queryParams) => {
// For CodeIgniter 4, you might need to adjust how parameters are sent
queryParams.set("ci_search", queryParams.get("search")); // Rename search parameter
// Add CSRF token if needed
queryParams.set("csrf_token_name", document.querySelector("meta[name="csrf-token"]").content);
return queryParams;
},
// Other options...
};Example:
https://gist.github.com/faizalmy/16ad7f2befdce42c208c744e7351759c
https://gist.github.com/faizalmy/e2aa70f2da0d5935acfb216d2db5381f
