如何在laravel中设置分页而不刷新整个页面

Question

控制器

    //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'));

我使用自定义分页。

在我看来，我使用了userreviews.blade.php，它被插入到detailed_page.blade.php 中，它被视为主视图文件。

查看

//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>

这些是我的视图文件..

在这里，分页工作正常..

问题是当我点击分页链接时，它会将我带到下一页..

但是，它刷新了整个页面，而我在该页面中丢失了其他结果。

有没有其他只改变指定视图文件的分页方式。有人帮帮我..

提前谢谢..

Answer 1

首先创建一个要在其中显示结果的容器。然后创建一个 Blade 子模板来显示该容器的所有内容。使用 jQuery 之类的东西来监听点击事件并获得下一个/上一个结果。下面这样的东西（伪，未经测试）

在 page.blade.php 中

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

在 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>

在您的 javascript 文件中：

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

发送 ajax 请求时处理错误 500

同时确保您在通过 ajax 发送数据时不会遇到令牌验证问题（出现 HTTP 500 错误的 10 次中有 9 次）。在主布局中设置元标记，例如：<meta name="csrf-token" content="{{ crsf_token() }}">

并将以下内容添加到您的 javascript 中；它会自动发送当前令牌以及您发出的每个 ajax 请求的标头。

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