Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
Laravel Datatable
i was using datatable in blade laravel, it can shown the data, but if i had 20 data, all data is show, before i was set pageSize to 5, but it same. here the html, js, and usercontroller php.
<div class="grid">
<div class="min-w-full card card-grid">
<div class="flex-wrap py-5 card-header">
<h3 class="card-title">
Remote Data Source
<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox"
value="1" />
<span class="order-1 switch-label">
Push Alerts
</span>
</label>
</div>
<div class="card-body">
<div id="kt_remote_table">
<div class="scrollable-x-auto">
<table
class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
data-datatable-table="true">
<thead>
<tr>
<th class="min-w-[250px]" data-datatable-column="name">
<span class="sort">
<span class="sort-label">
Name
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]" data-datatable-column="email">
<span class="sort">
<span class="sort-label">
Email
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
<div
class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
<div class="flex gap-2 items-center">
Show
<select class="w-16 select select-sm" data-datatable-size="true"
name="perpage">
</select>
per page
</div>
<div class="flex gap-4 items-center">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>const apiUrl = "{{ route("users.data") }}";
const element = document.querySelector("#kt_remote_table");
const dataTableOptions = {
apiEndpoint: apiUrl,
pageSize: 5,
mapResponse: (responseData) => {
const total = responseData.length;
return {
data: responseData,
totalCount: total,
};
},
columns: {
name: {
title: "Name",
},
email: {
title: "Email",
}
},
};
const dataTable = new KTDataTable(element, dataTableOptions);public function data()
{
$users = User::all();
return response()->json($users);
}
Replies (1)
Hi Sodiq Ardianto
Sorry for the delay. The problem likely in how the data is being fetched and returned from your controller.
Modify your data method in the UserController to return paginated results instead of all users.
Adjust the DataTable Configuration: Ensure that the DataTable is correctly configured to handle pagination.
Here are the necessary changes:
You need to paginate the results in your controller. Here's how you can do that:
public function data()
{
// Use pagination instead of fetching all users
$users = User::paginate(5); // Change 5 to your desired page size
return response()->json([
"data" => $users->items(), // Return the current page items
"totalCount" => $users->total(), // Return the total count of items
]);
}Make sure your DataTable is set up to handle the pagination correctly.
const apiUrl = "{{ route("users.data") }}";
const element = document.querySelector("#kt_remote_table");
const dataTableOptions = {
apiEndpoint: apiUrl,
pageSize: 5, // Ensure this matches the pagination in the controller
mapResponse: (responseData) => {
return {
data: responseData.data, // Use the data from the response
totalCount: responseData.totalCount, // Use the total count from the response
};
},
columns: {
name: {
title: "Name",
},
email: {
title: "Email",
}
},
};
const dataTable = new KTDataTable(element, dataTableOptions);
