Laravel pagination without refreshing page - php

Question

I found this Ajax for pagination without refreshing the page.
Pagination works, but page is refreshing every time, it's annoying because table is on bottom of the page.
Can you check, maybe I made some mistake. Or give me some ideas to fix this.
Controller:
public function index(Request $request)
{
$satwork = DB::table('companies')
->leftJoin('devices', 'companies.id', '=', 'devices.companyId')
->leftJoin('vehicles', 'devices.id', '=', 'vehicles.deviceId')
->leftJoin('drivers', 'vehicles.id', '=', 'drivers.vehicleId')
->select('companies.company_name', 'devices.device_type', 'vehicles.license_plate', 'drivers.driver_name')
->paginate(5);
return view('/welcome', compact('satwork'));
}
public function fetch_data(Request $request)
{
if ($request->ajax())
{
$satwork = DB::table('companies')
->leftJoin('devices', 'companies.id', '=', 'devices.companyId')
->leftJoin('vehicles', 'devices.id', '=', 'vehicles.deviceId')
->leftJoin('drivers', 'vehicles.id', '=', 'drivers.vehicleId')
->select('companies.company_name', 'devices.device_type', 'vehicles.license_plate', 'drivers.driver_name')
->paginate(5);
return view('pagination', compact('satwork'))->render();
}
}
welcome.blade
<div class="container">
<div id="table_data">
#include('pagination')
</div>
</div>
</div>
<!-- pagination -->
<script>
$(document).ready(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var page = $(this).attr('href').split('page=')[1];
fetch_data(page);
});
function fetch_data(page) {
$.ajax({
url: "//pagination?page=" + page,
success: function(satwork) {
$('#table_data').html(satwork);
}
});
}
});
}
</script>
pagination blade
<tbody>
#foreach ($satwork as $row)
<tr>
<td>{{ $row -> company_name}}</td>
<td>{{ $row -> device_type}}</td>
<td>{{ $row -> license_plate}}</td>
<td>{{ $row -> driver_name}}</td>
</tr>
#endforeach
</tbody>
{!! $satwork->links() !!}
routes
Route::get('/', 'WelcomeController#index');
Route::get('/welcome/pagination', 'WelcomeController#fetch_data');

Answer 1

Your ajax request URL to fetch the pagination is not correct.
url: "//pagination?page=" + page
That should be url: "/welcome/pagination?page=" + page
function fetch_data(page) {
var l = window.location;
// the request path should be
// domain.com/welcome/pagination
$.ajax({
url: l.origin + l.pathname + "?page=" + page,
success: function(satwork) {
$('#table_data').html(satwork);
}
});
}

Answer 2

It can be done with dataTables
Script:
<script>
$(document).ready(function() {
$('#companies').DataTable({
"lengthMenu": [[2, 3, 5, 10, 20, -1], [2, 3, 5, 10, 20, "All"]]
});
});
</script>
Style:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
And it's working.