// Assuming you have a table element in your HTML like:
// <div data-kt-datatable="true">
// <table data-kt-datatable-table="true">
// <!-- Your table headers and body -->
// </table>
// <!-- Other elements like pagination controls -->
// </div>


document.addEventListener("DOMContentLoaded", () => {
 const element = document.querySelector("[data-kt-datatable="true"]"); // Target your table container
 if (element) {
 const datatable = new KTDataTable(element, {
 apiEndpoint: "/your-laravel-endpoint-url", // Your Laravel API endpoint, e.g., "/api/data"
 requestMethod: "GET", // Or "POST" if needed
 requestHeaders: {
 "Content-Type": "application/json", // Adjust based on your API
 // Add any auth headers if required, e.g., "Authorization": "Bearer your-token"
 },
 pageSize: 10, // Initial page size for client-side pagination
 pageSizes: [5, 10, 20, 30, 50], // Options for users to change
 search: {
 delay: 500, // Delay for search input
 callback: (data, searchString) => { // This is already defined in your code
 // Filters data locally; no changes needed
 return data.filter(item => 
 Object.values(item).some(value => 
 String(value).toLowerCase().includes(searchString.toLowerCase())
 )
 );
 },
 },
 sort: {
 callback: (data, sortField, sortOrder) => {
 // Sorts data locally; uses the existing sort handler
 return data.sort((a, b) => {
 if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1;
 if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1;
 return 0;
 });
 },
 },
 pagination: {
 // Use the default pagination templates from your code
 },
 stateSave: true, // Optionally save state for persistence
 });

 // Now, trigger a reload to fetch data from the endpoint
 datatable.reload(); // This will fetch all data via _fetchDataFromServer() and then process it client-side

 // Example: Programmatically search or paginate
 const searchInput = document.querySelector("input[data-kt-datatable-search]"); // Assuming you have a search input
 if (searchInput) {
 searchInput.addEventListener("keyup", () => {
 datatable.search(searchInput.value); // Calls the search method, which uses the client-side callback
 });
 }

 // Example: Navigate to a specific page
 // datatable.goPage(2); // Go to page 2, which slices the data array locally
 }
});