Data table remote source, how to use search option vanilla js
hello,
Data table remote source, how do I use search option using vanilla js? I checked ktui documentation but you don't have a sample for it, I'm using latest metronic build v9+
Replies (8)
Hi Ryann
To inject custom payload into KTDataTable requests, use the mapRequest function in your KTDataTable configuration. This function allows you to modify the query parameters before they're sent to your API endpoint:
const dataTable = new KTDataTable(element, {
apiEndpoint: "/api/your-endpoint",
pageSize: 10,
mapRequest: function(queryParams) {
// Add your custom parameters here
queryParams.set("custom_param", "custom_value");
queryParams.set("user_id", "123");
queryParams.set("additional_data", JSON.stringify({key: "value"}));
return queryParams;
}
});For dynamic custom parameters that change based on user interactions:
// Initialize datatable with mapRequest function
const dataTable = new KTDataTable(element, {
apiEndpoint: "/api/your-endpoint",
mapRequest: function(queryParams) {
// Get values from form elements or other sources
const statusFilter = document.getElementById("status-filter").value;
const dateRange = document.getElementById("date-range").value;
if (statusFilter) {
queryParams.set("status", statusFilter);
}
if (dateRange) {
queryParams.set("date_range", dateRange);
}
return queryParams;
}
});
// Handle filter changes - this will trigger reload with new parameters
document.getElementById("status-filter").addEventListener("change", function() {
dataTable.reload(); // This will call mapRequest again with updated parameters
});The mapRequest function is called every time a new request is made (search, pagination, sorting, etc.)
You can access form values, global variables, or any other data source within the mapRequest function
Always return the modified queryParams object
Use dataTable.reload() to trigger a new request with updated parameters
question with remote source, i'm trying to inject custom payload into the request but it's not attaching, is it doing a cleanup before the ajax call? if so how do i attach custom payload?
I was able to make my sorting work, please note that ktui.min.js included in dist of latest metronic v9 is broken, I had to get ktui js from ktui docs site
Hi Ryann
Please check this example
https://github.com/keenthemes/ktui/blob/main/examples/datatable/sorting-test.html
Thanks
Do you have a sample that uses sorting and filters?
nevermind I fixed it
Hello,
Thank you so much for the fast response, I was able to make search work, but I get this error from console.
ktui.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'tBodies')
at e._initElements (ktui.min.js:1:124318)
at new e (ktui.min.js:1:119307)
at ktui.min.js:1:140975
at NodeList.forEach (<anonymous>)
at e.createInstances (ktui.min.js:1:140860)
at e.init (ktui.min.js:1:141118)
at Object.init (ktui.min.js:1:226976)
at ktui.min.js:1:227084
at HTMLDocument.<anonymous> (ktui.min.js:1:262303)
e._initElements @ ktui.min.js:1
e @ ktui.min.js:1
(anonymous) @ ktui.min.js:1
e.createInstances @ ktui.min.js:1
e.init @ ktui.min.js:1
init @ ktui.min.js:1
(anonymous) @ ktui.min.js:1
(anonymous) @ ktui.min.js:1
this is my table structure I got this from ktui docs sample
<div class="grid w-full space-y-5">
<div class="kt-card">
<div class="kt-card-header min-h-16">
<!-- FIX: Added "#" to correctly link to the table ID -->
<input type="text" placeholder="Search..." class="kt-input sm:w-48"
data-kt-datatable-search="#kt_datatable_remote_source" />
</div>
<div class="kt-card-table" data-kt-datatable-page-size="5"
data-kt-datatable-state-save="true">
<div class="kt-table-wrapper kt-scrollable">
<table class="kt-table" data-kt-datatable-table="true" data-kt-datatable="true">
<thead>
<tr>
<th scope="col" class="w-20" data-kt-datatable-column="id">
<span class="kt-table-col"><span class="kt-table-col-label">ID</span><span
class="kt-table-col-sort"></span></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="full_name">
<span class="kt-table-col"><span class="kt-table-col-label">Fullname</span><span
class="kt-table-col-sort"></span></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="email">
<span class="kt-table-col"><span class="kt-table-col-label">Email</span><span
class="kt-table-col-sort"></span></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="role_name">
<span class="kt-table-col"><span class="kt-table-col-label">Role</span><span
class="kt-table-col-sort"></span></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="status_value">
<span class="kt-table-col"><span class="kt-table-col-label">Actions</span><span
class="kt-table-col-sort"></span></span>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!--begin:pagination-->
<div class="kt-datatable-toolbar">
<div class="kt-datatable-length">
Show<select class="kt-select kt-select-sm w-16" name="perpage"
data-kt-datatable-size="true"></select>per page
</div>
<div class="kt-datatable-info">
<span data-kt-datatable-info="true"></span>
<div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
</div>
</div>
<!--end:pagination-->
</div>
</div>
</div>Hi Ryann
Here's how to implement search functionality with remote data sources in KTUI datatable:
First, ensure your HTML has the proper search input with the correct data attribute:
<!-- Search input must point to your table ID -->
<input type="text"
data-kt-datatable-search="#your_table_id"
placeholder="Search..."
class="form-control" />
<!-- Your datatable -->
<table data-kt-datatable="true">
<!-- table content -->
</table>// Initialize the datatable with remote data source
const dataTable = new KTDataTable(document.getElementById("your_table_id"), {
apiEndpoint: "/api/your-endpoint",
pageSize: 10,
search: {
delay: 500 // 500ms delay before search is triggered
}
});Your API endpoint should handle these parameters that KTDataTable automatically sends:
// Parameters sent by KTDataTable:
// - page: Current page number
// - size: Page size
// - sortField: Column being sorted
// - sortOrder: Sort direction (asc/desc)
// - search: Search query (from your search input)
// - filters: JSON string of applied filtersAPI Response Format:
{
"data": [
{"id": 1, "name": "John Doe", "email": "john@example.com"},
{"id": 2, "name": "Jane Smith", "email": "jane@example.com"}
],
"totalCount": 100
}Search Input Attribute: The search input must have data-kt-datatable-search="#your_table_id" pointing to your table ID
Automatic Debouncing: KTDataTable automatically handles debounced search (500ms delay by default)
Server-Side Filtering: The search parameter is sent to your API endpoint automatically
No Local Search: When using remote data sources, search is handled server-side, not client-side
