Ksaif123
1 week ago

Laravel 5.7 Pagination previous & next links not functional with AJAX

Posted 1 week ago by Ksaif123

I have encountered a problem with Laravel 5.7 & AJAX Pagination. My pagination links are working fine except the previous Url which is not going to backward links despite not being on first page, and the next page Url, which is not going to forward links and always stays at page 2.

I've tried everything online. I've come to two conclusions after research:

  1. currentPage() method in Laravel 5.7 Pagination's AbstractPaginator Class always return 1 regardless of clicking different links.
  2. Laravel 5.7 Pagination's default bootstrap blade layout file may NOT be integrated with AJAX (or its container).

Here's some of my code. Inform me if you need more. Any kind of help would be appreciated. Thanks in Advance.

MailSettingsController.php (For HTTP/Controller functionality and AJAX request handling):

if ($request->ajax()) {
            //Default Pagination using paginate()

            $output='';
            $query = MailSettings::latest('created_at')->paginate(3);
            $total_row = count($query);

            if ($total_row > 0) {
                foreach ($query as $value) {
                    $output .='
                                <tr>
                                    <td>'.$value->email.'</td>
                                    <td>'.$value->subject.'</td>
                                    <td>'.$value->body.'</td>
                                    <td>'.$value->type.'</td>
                                    <td>'.$value->status.'</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-3"></div>
                                            <div class="col-sm-3">
                                                <a href="'.route('edit',$value->id).'"><i class="fas fa-pencil-alt"></i></a>
                                            </div>
                                            <div class="col-sm-3">
                                                <form action="'.route('delete',$value->id).'" method="POST">
                                                    '.csrf_field().'
                                                    <button type="submit" class="btn"><i class="fas fa-trash-alt"></i></button>   
                                                </form>
                                            </div>
                                            <div class="col-sm-3"></div>
                                        </div>
                                    </td>
                                </tr>
                            ';
                }
            }else{
                    $output ='
                                <tr>
                                    <td align="center" colspan="5">No Data Found</td>
                                </tr>
                            ';
            }
            $data=array(
                'table_data'=>$output,
                'total_data'=>$total_row
            );
            return response()->json($data);
}else{

}
table_data_ajax.blade.php (for AJAX, script part only):

$(document).on('click','.pagination a',function(e){
            e.preventDefault();
            var click=$(this).attr('href').split('page=')[1];
            console.log(click);
            var dump=$(this).attr('href');
            console.log(dump);
            fetch_paginated_data(click);
        });

function fetch_paginated_data(click){
            $.ajax({
                url: '{{ !empty($search_for) ? $search_for: ''}}'+'fetch_paginated_data/?page='+click,
                method: 'GET',
                dataType:'json',
                success: function(data,status){
                    $('tbody').html(data.table_data);
                    $('#total_records').text(data.total_data);
                },
                error: function(data) {
                    var errors = data.responseJSON;
                    console.log(errors); 
                },
                statusCode:{
                    200: function(data){
                        console.log('200');
                    },
                    500: function(data){
                        console.log('500');
                    }
                }
            });
        } 

Please sign in or create an account to participate in this conversation.