How to Ajax Pagination in Laravel 5
Ajax makes your application more portable, you don't need to reload or refresh the entire body for small changes, you can make changes without loading page in any section.
Generate Pagination
Route
Route::get('/view-device','DeviceController@index');
View Call
public function index()
{
return view('device.view_device');
}
Html Code
<meta name="csrf-token" content="{{ csrf_token() }}">
<table class="table table-bordered" id="items">
<thead>
<tr>
<th style="text-align:center;">Item Name</th>
<th style="text-align:center;">Sub Item Product</th>
<th style="text-align:center;">Vat%</th>
<th style="text-align:center;">Rate</th>
<th style="text-align:center;">Created Date</th>
<th style="text-align:center;">Action</th>
</tr>
</thead>
<tbody id="renderstring">
</tbody>
</table>
<div class="pagi"></div>
Jquery Call
function renderstring()
{
$.ajax({
url: "{{url('getdevicelist')}}",
data:"",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type:"POST",
dataType: "json",
success: function(json) {
$('#renderstring').html(json.success);
$('.pagi').html(json.pagi);
},
});
}
renderstring();
Call to routes
Route::post('getdevicelist','DeviceController@getdevicelist');
Route to Controller
public function getdevicelist(Request $request)
{
$str = '';
$data = Device::orderBy('id', 'desc')->paginate(10);
if(!empty($data))
{
foreach ($data as $device) {
$childprint = '';
$str.='<tr><td style="text-transform:capitalize;">'.$device->item_name.'</td>';
$str.='<td>'.$childprint.'%</td>';
$str.='<td >'.$device->vat.'%</td>
<td>'.number_format((int)$device->rate, 2).'</td>
<td>'.$device->created_at.'</td>
<td><button class="btn btn-danger" id='.$device->id.'>Delete</button></td></tr>';
}
$json['success'] = $str;
$json['pagi'] = ''.$data->links().'';
}
else
{
$json['success'] = '<tr><td colspan="100%">No Record Found!!</td></tr>';
}
echo json_encode($json);
}
Now finally call pagination.
$('.pagi').delegate('.pagination a','click',function(event){
event.preventDefault();
var pagiurl = $(this).attr('href');
$.ajax({
url: pagiurl,
data:"",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type:"POST",
dataType: "json",
success: function(json) {
$('#renderstring').html(json.success);
$('.pagi').html(json.pagi);
}
});
});
