使用 Laravel 进行 AJAX 分页

Posted 2023-03-10

【中文标题】使用 Laravel 进行 AJAX 分页

【英文标题】：AJAX pagination with Laravel

【发布时间】：2015-01-01 16:41:49

【问题描述】：

我有一个名为posts.blade.php 的视图，它包含在home.blade.php 中：

<div id="posts">
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src=" URL::to($post->thumbnail) "  />
                <h1> $post->title </h1>
            </div>
            <div class="score"> $post->rating </div>
        </div>
    @endforeach
    <div id="pagination"> $posts->links() </div>
</div>

当用户搜索某些帖子时，控制器的 postSearch() 函数会返回 JSON 响应：

function postSearch() 

    $posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts

    return Response::json(View::make('includes.posts', ['posts' => $posts])->render());

并且 jQuery 将 html 附加到 #posts div 上：

$('#search').submit(function(e) 
    e.preventDefault();
    var form = $(this);

    $.post(form.attr('action'), form.serialize(), function(data) 
        $('#posts').html(data);
    );
);

这很完美。但是现在当我点击分页链接时，页面重新加载并且我的搜索结果消失了（很明显）。我如何对这些帖子进行分页？我看过this、this和this的文章，但是我不明白如何实现。

编辑

到目前为止，这是我用于分页的 jQuery：

$('#posts').on('click', '.pagination a', function(e) 
    e.preventDefault();
    var url = $(this).attr('href'),
        page = url.split('page=')[1],
        data = $('#search').serializeArray();

    data.push(page: page); // Add page variable to post data
    console.log(data);

    $.post($('#search').attr('action'), data, function(data) 
        $('#posts').html(data['posts']);
    );
);

这是我点击分页链接时正在发送的数据（第 2 页）：

很遗憾，没有任何反应，第 1 页的帖子继续显示。

【参考方案1】：

我对 Laravel 中的分页不是很熟悉，但从您列出的链接来看，它看起来并不难。这段代码虽然未经测试...

$('#pagination a').on('click', function(e)
    e.preventDefault();
    var url = $(this).attr('href');
    $.post(url, $('#search').serialize(), function(data)
        $('#posts').html(data);
    );
);

更新

如果分页链接错误（就像 OP 的那样），您必须自己构建网址。 只需获取您想要的网址并将?page=#number 添加到其中即可。

// page being the page number stripped from the original link
var url = $('#search').attr('action')+'?page='+page;

【讨论】：

请看我的编辑。我尝试了您的代码，但它返回了我主页的 HTML，因为分页链接的 href 是 http://localhost:8080/laravel/laravel/public?page=2。

尝试通过 GET 发送页码。我做了一些测试，看起来 Laravel 没有选择 POST 参数。只需将其附加到操作 url：$('#search').attr('action')+'?page='+page

让我指出，if ($(this).attr('href') == '#') 检查不是必需的，因为当前的分页链接不可点击。

谢谢，已删除...可能在较早版本的框架中可以点击

【参考方案2】：

我正在使用以下 js 来获取关于 href 点击的数据。

// Your Local url 
var Url = 'laraveltestproject/laravelpagination';

$('#ajaxContent').load("Url");

$('.pagination a').on('click', function(event) 

    event.preventDefault();
    if ($(this).attr('href') != '#') 
        $('#ajaxContent').load($(this).attr('href'));
    
);

如需完整示例，您可以访问http://www.tutsway.com/laravel-ajax-pagination-example.php。

【参考方案3】：

我有完美的工具来完成这项工作。请查看此回购https://github.com/themightysapien/ajaxtable

请阅读文档，它非常易于使用并且是专门为 laravel 制作的。您需要做的就是按照以下示例返回结果。

return Response::json(array(
              'data'=> View::make('only_table_row_view', compact('collection')->render(),
              'pagination'=>(string) $collection->links()
              ));

已添加所需文件

<link rel="stylesheet" href="css/ajaxtable.css">
<script src="js/plugins.js"></script>
$(".yourtable").ajaxtable();

通过表中的 data-requestUrl 属性初始化您的 ajax url。 在您希望分页出现的页面中添加 id="paginationWrapper" div。

如果您有任何问题，请在本地服务器中运行 repo，并查看 html 标记和插件选项的源代码。

【参考方案4】：

博客中的帖子示例，解决删除按钮上的分页重新加载： （简单的 foreach 但你必须给面板和按钮一个 id 和一个类给按钮并使用 $post->id 来定义所有）

最后的诀窍不是调用使用 pagination() 的视图/控制器，而是根据需要使用 javascript 更改视图。

      @foreach($posts as $post)
    <div id="panel$post->id" class="panel panel-default">
      <div class="panel-body">
        !! $post->content !!
      </div>
      <div class="panel-footer">
        <span class="label label-default"><span class="glyphicon glyphicon-time"></span> creado $post->created_at->diffForHumans()</span>
        <span class="label label-default"><span class="glyphicon glyphicon-time"></span> modificado $post->updated_at->diffForHumans()</span>
        <span class="label label-success">autor:  imagica\User::find($post->user_id)->name</span>
        @if(Auth::user()->id === $post->user_id)

          <form method="post" style="position:relative; top:-25px;">
            <button class="btn btn-danger btn-sm pull-right destroy" id="$post->id" type="button" >eliminar</button>
          </form>

          <form action=" action('PostsController@edit', $post->id) " method="get" style="position:relative; top:-25px;">
            <button class="btn btn-warning btn-sm pull-right" type="submit" >Editar</button>
            --  csrf_field()  --
          </form>
        @endif
      </div>
    </div>
  @endforeach

最后查看javascript：

$(function()
$(".destroy").on("click", function()
  var vid = $(this).attr("id");
  var v_token = "csrf_token()";
  var parametros = _method: 'DELETE', _token: v_token;
  var archivo = "http://imagica.app/posts/" + vid + "";
  $.ajax(
     type: "POST",
     url: archivo,
     data: parametros,
     success: function(data)
       $('#panel'+ data).hide();
       location.reload();
     
  );
);
);

在控制器销毁功能中（注意您将 $post->id 作为数据发送到 ajax，它用于定义选择器以隐藏您删除的帖子面板）：

    public function destroy($id)

  $post= Post::find($id);
  $article_id= $post->article_id;
  $article= Article::find($article_id);
  $msg = session()->flash('message', "Post eliminado.");
  $post-> delete();
  $data= $post->id;
  return $data;

在javascript中最后一个函数“location.reload()”是为了给flash消息充电。