How to make KTDataTable search and filters work with remote data source?
I’m using KTDataTable (with Metronic v9 theme) with fixed GET route as remote data source. The table loads fine initially.
https://ktui.io/docs/datatable
I added a search input with `data-kt-datatable-search="true"`. I expected that typing text and pressing Enter would trigger a new GET request with a search parameter, but nothing happens (no new request is sent). Is there a boilerplate example showing how the search input should be connected to the table when using a remote data source?
I also have a `<select>` dropdown next to the table that should work as a filter. I would like to send the selected ID together with the request parameters and reload the table. I saw there is a `reload()` method, but I couldn’t find how to pass additional parameters along with the request. What is the recommended way to do this?
Replies (5)
Hi Adam Nielsen
Yes, setting filters in the _state property is actually the recommended and correct way to set initial filters.
const dataTable = new KTDataTable(element, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
_state: {
filters: [
{ column: "shop_id", type: "text", value: shopId },
{ column: "date_type", type: "text", value: dateType }
]
}
});The _state property is merged into the configuration during initialization.
Filters are processed before the first API request is made.
If you want to avoid using the _state property, you can disable state saving and set filters after initialization:
const dataTable = new KTDataTable(element, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
stateSave: false // Disable automatic state saving
});
// Set filters immediately after creation
dataTable.setFilter({ column: "shop_id", type: "text", value: shopId });
dataTable.setFilter({ column: "date_type", type: "text", value: dateType });
dataTable.reload(); // Trigger the first request with filtersIf your filters don't correspond to specific columns, use mapRequest:
const dataTable = new KTDataTable(element, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
mapRequest: function(queryParams) {
// Add custom parameters that aren"t column-specific
queryParams.set("shop_id", shopId);
queryParams.set("date_type", dateType);
return queryParams;
}
});Thanks
I have a question about filters.
When I run new KTDataTable(...) the first time, I want to send filters along with the initialization. I found that this works:
```
_state: {
filters: [
{ column: "shop_id", type: "text", value: shopId },
{ column: "date_type", type: "text", value: dateType }
]
},
```
Is this the recommended way to pass filters on initialization?
Right now, `new KTDataTable(...)` triggers a request immediately without giving me the chance to call `setFilters` first.
Hi
Thank you for pointing out the documentation issues! We will update the official docs.
You can customize the pagination text by setting the info property in your KTDataTable configuration. The default format is '{start}-{end} of {total}', but you can change it to any format you need:
Basic Localization
const dataTable = new KTDataTable(element, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
info: "{start}-{end} de {total}", // Spanish
// or
info: "{start}-{end} sur {total}", // French
// or
info: "{start}-{end} von {total}", // German
});Dynamic Localization Based on Language
// Language configuration object
const translations = {
"en": {
info: "{start}-{end} of {total}",
infoEmpty: "No records found",
previous: "Previous",
next: "Next"
},
"es": {
info: "{start}-{end} de {total}",
infoEmpty: "No se encontraron registros",
previous: "Anterior",
next: "Siguiente"
},
"fr": {
info: "{start}-{end} sur {total}",
infoEmpty: "Aucun enregistrement trouvé",
previous: "Précédent",
next: "Suivant"
}
};
const currentLang = "es"; // Get from your app
const t = translations[currentLang];
const dataTable = new KTDataTable(element, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
info: t.info,
infoEmpty: t.infoEmpty,
pagination: {
previous: {
class: "kt-datatable-pagination-button kt-datatable-pagination-prev",
text: t.previous
},
next: {
class: "kt-datatable-pagination-button kt-datatable-pagination-next",
text: t.next
},
number: {
class: "kt-datatable-pagination-button",
text: "{page}"
},
more: {
class: "kt-datatable-pagination-button kt-datatable-pagination-more",
text: "..."
}
}
});Available Placeholders
The info template supports these placeholders:
{start}: First item number on current page
{end}: Last item number on current page
{total}: Total number of items
Thank you, this worked!
Maybe consider updating your official docs:
- In remote data source you use `data-kt-datatable-search="true"` instead of `data-kt-datatable-search="#table_id"`.
- It’s also not listed under https://ktui.io/docs/datatable#selectors
- And in the first example, it’s missing completely, even though there’s a search input field.(https://ktui.io/docs/datatable#basic-usage)
The filter works fine as well — thanks a lot!
One last question: How can I translate the pagination bar?
The “Show X per page” part can be translated via HTML markup, but how can I localize the “1–10 of 2000” text at the bottom right? I’d like to translate the word of since my app is multilingual.
Hi
The search input with data-kt-datatable-search="true" should work automatically with remote data sources. However, there are a few key points:
<input type="text" data-kt-datatable-search="#your_table_id" placeholder="Search..." />const dataTable = new KTDataTable(element, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
// ... other options
});The search functionality automatically sends a search parameter to your API endpoint when the user types in the search input.
Custom Filter Implementation
For your <select> dropdown filter, you need to manually handle the change event and use the setFilter() method:
<select >
<option value="">All Categories</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>// Get your datatable instance
const tableElement = document.querySelector("#your_table_id");
const dataTable = KTDataTable.getInstance(tableElement);
// Add event listener to your select dropdown
document.getElementById("category-filter").addEventListener("change", function() {
const selectedValue = this.value;
if (selectedValue) {
// Set the filter
dataTable.setFilter({
column: "category_id", // The column name in your data
type: "text",
value: selectedValue
});
} else {
// Clear the filter by setting an empty value
dataTable.setFilter({
column: "category_id",
type: "text",
value: ""
});
}
// Reload the table with new parameters
dataTable.reload();
});Next Steps:
- Make sure your API endpoint accepts the search parameter for search functionality
- Implement the custom filter logic using setFilter() and reload()
- Use mapRequest if you need to send additional custom parameters
- Test that your API returns data in the expected format with data and totalCount fields
- If you're still having issues with the search not triggering requests, check that:
-- The search input has the correct data-kt-datatable-search attribute pointing to your table ID
-- Your table has the data-kt-datatable="true" attribute
-- The KTDataTable is properly initialized with an apiEndpoint
