New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Metronic 9 / KTDatatable
I'd like to search KTDATATABLE with the desired parameters.
If I press a certain button, I want to change the appiurl of ktdatable to draw new data.
If the URL can be changed, how can I put the INPUT data I want as a parameter?
Right now, page, size, sortOrder, and sortField are automatically sent as parameters.
Replies (1)
Hi
Unfortunately, the current KTDataTable implementation does NOT support changing the API URL after initialization. The apiEndpoint is set during the constructor and cannot be modified afterward.
Recreate the Datatable Instance
// Get the table element
const tableElement = document.querySelector("#your_table_id");
// Button click handler to change API URL
document.getElementById("change-api-button").addEventListener("click", function() {
// Get the existing instance
const existingInstance = KTDataTable.getInstance(tableElement);
// Dispose of the old instance
if (existingInstance) {
existingInstance.dispose();
}
// Create new instance with different API endpoint
const newDataTable = new KTDataTable(tableElement, {
apiEndpoint: "new-api-endpoint-url",
pageSize: 10,
mapRequest: function(queryParams) {
// Add your custom parameters here
const customInput = document.getElementById("custom-input").value;
const statusFilter = document.getElementById("status-filter").value;
if (customInput) {
queryParams.set("custom_param", customInput);
}
if (statusFilter) {
queryParams.set("status", statusFilter);
}
return queryParams;
}
});
});Passing Custom Parameters
const dataTable = new KTDataTable(tableElement, {
apiEndpoint: "your-api-endpoint",
pageSize: 10,
mapRequest: function(queryParams) {
// Get values from your input fields
const searchTerm = document.getElementById("search-input").value;
const category = document.getElementById("category-select").value;
const dateFrom = document.getElementById("date-from").value;
const dateTo = document.getElementById("date-to").value;
// Add custom parameters
if (searchTerm) {
queryParams.set("search_term", searchTerm);
}
if (category) {
queryParams.set("category", category);
}
if (dateFrom) {
queryParams.set("date_from", dateFrom);
}
if (dateTo) {
queryParams.set("date_to", dateTo);
}
return queryParams;
}
});
// Button to apply filters
document.getElementById("apply-filters-button").addEventListener("click", function() {
dataTable.reload(); // This will send all parameters including your custom ones
});
