Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to Ajax Pagination in Laravel 5

by
Category:laravel
ajax laravel
How to Ajax Pagination in Laravel 5

Ajax makes your application more flexible, you don't need to reload or refresh the whole body for small changes, you can made changes in any part without loading page.

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);
            }
    });
});

0 Comments


Html code work in comment box


Related Post