CODEWITHSUNDEEP
phpjquerylaravelpagination
Suganya Rajasekar
Suganya Rajasekar

Reputation: 684

How to set pagination in laravel without refreshing the whole page

Controller

    //Pagination
    $page = 1;
    $perPage = 5;
    $Reviews = DB::select($Reviews);
    $currentPage = Input::get('page', 1) - 1;
    $pagedData = array_slice($Reviews, $currentPage * $perPage, $perPage);
    $Reviews =  new Paginator($pagedData, count($Reviews), $perPage);
    $Reviews->setPath($id);

    $this->data['review_view'] = 'userreviews.reviews';
    $this->data['pages'] = 'hotelroom.detailed_page';

    return view($page, $this->data, compact('Reviews'));

I use custom pagination.

And in my view I use userreviews.blade.php which was inserted into the detailed_page.blade.php & it was considered as main view file.

View

//userreviews.blade.php

    @foreach($Reviews as $rev)
            //Displaying contents
    @endforeach
    <div class="pagination">
           <?php echo $Reviews->appends($_REQUEST)->render(); ?>
    </div>

//detailed_page.blade.php

    <div class="review_view">
           @include($review_view)
    </div>

These are my view files..

Here, the pagination works properly..

The problem is the when I click the pagination links it take me to the next page..

But,it refresh the whole page,and I lost my other results in that page.

Is there any other ways for pagination that only change the specified view file.Someone help me..

Thanks in advance..

Upvotes: 1

Views: 7243

Answers (1)

Ben
Ben

Reputation: 11188

First create a container in which you want to display the results. Then create a Blade subtemplate that displays all the content for that container. Use something like jQuery to listen for click events and get the next/previous result. Something like this below (pseudo, untested)

In page.blade.php

<div id="results">@include('page_details')</div>

In page_details.blade.php

@foreach($items as $item)
  // your $item display..
@endforeach

// return $from from your controller. It represents the current $_GET['from']
<span class="prev" data-from="{{ $from- 1}}">Previous</span> 
<span class="next" data-from="{{ $from + 1 }}">Next</span>

In your javascript file:

$(document).ready(function() { 
  $(document).on('click', '.prev, .next', function() { 
    $.ajax({
      // the route you're requesting should return view('page_details') with the required variables for that view
      url: '/route/as/defined/in/routes-file?from=' + $(this).attr('data-from'),
      type: 'get'
    }).done(response) { 
      $('div#results').html(response);
    }
  });
});

Tackling Error 500 when sending ajax requests

Also make sure you don't run into token verification issues (9 out of 10 times the reason you get HTTP 500 errors) when sending data via ajax. Set up a meta tag in your master layout like: <meta name="csrf-token" content="{{ crsf_token() }}">

And add the following to your javascript as well; it sends the current token automatically with the headers with each ajax request you make.

$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});

Upvotes: 2

Related Questions