如何使用 Laravel 和 jQuery 对查询结果进行分页

Posted 2023-03-14

【中文标题】如何使用 Laravel 和 jQuery 对查询结果进行分页

【英文标题】：How to paginate query results using Laravel and jQuery

【发布时间】：2021-12-04 04:56:02

【问题描述】：

我正在尝试转换此静态查询

$companiesFinal = Websites::query();

    if(!empty($request->searchWord)) 
        $companiesFinal->where('web_name', 'LIKE', '%' . $request->searchWord . '%');
        $companiesFinal->where('web_seo_url', 'LIKE', '%' . $request->searchWord . '%');
    

    if(!empty($request->category))
        if(is_array($request->category)) 
            foreach($request->category as $categ) 
                $companiesFinal->orWhere('web_category', 'LIKE', '%' . $categ . '%');
            
         else 
            $companiesFinal->where('web_category', 'LIKE', '%' . $request->category . '%');
        
    

    if(!empty($request->claimed))
        if($request->claimed == "all")  else 
            $companiesFinal->where('claimed', '=', $request->claimed);
        
    

    if(!empty($request->sortBy)) 
        if($request->sortBy == "newest") 
            $companiesFinal->orderBy('created_at', 'DESC');
         elseif($request->sortBy == "oldest") 
            $companiesFinal->orderBy('created_at', 'ASC');
        
    

    $companies = $companiesFinal->paginate(7);

到 AJAX jQuery 调用，这是令人困惑的部分。我已经尝试过这样做，但没有成功。

我尝试了类似的方法：

$.ajax(
    type: 'GET',
    url: ' url("/ajaxCall") ',
    data: $("form").serialize(),
    success: function(response) 
        var websites = "";
        $.each(response.data, function(index, value) 
            websites = websites + "<div>... " + value.web_name + "......." + value.web_link + "...</div>";
        );
        $(".getResults").html(websites);
    ,
    error: function(xhr, ajaxOptions, thrownError) 
        console.log(xhr.status);
        console.log(thrownError);
    
);

当然，当我尝试将控制器查询转换为返回 JSON 响应和其他必要内容时，但结果是浏览器控制台显示“未定义值”。

让我感到困惑的是，在使用 Ajax 获取这些数据时，我将如何显示 Laravel 分页？如果有人提供帮助，我将不胜感激。

【问题讨论】：

欢迎来到 SO。你试过什么调试？在浏览器的开发工具中，如果您单击网络选项卡，预期的data 是否会随您的请求发送到服务器？反应怎么样 - 它看起来像你期望的那样吗？ “我已将控制器查询转换为返回 json 响应” - 你没有向我们展示那部分......？您的 AJAX 代码不包含 dataType - 如果一切顺利，这不是必需的，但一切都不顺利，所以...？

【参考方案1】：

根据文档，当你使用pagination into a JSON result 时，Laravel 返回的数据结构是这样的：

   "total": 50,
   "per_page": 15,
   "current_page": 1,
   "last_page": 4,
   "first_page_url": "http://laravel.app?page=1",
   "last_page_url": "http://laravel.app?page=4",
   "next_page_url": "http://laravel.app?page=2",
   "prev_page_url": null,
   "path": "http://laravel.app",
   "from": 1,
   "to": 15,
   "data":[
        
            // Record...
        ,
        
            // Record...
        
   ]

所以假设这个 HTML 结构：

<form>
  <!-- your search form ... --->
</form>
<div id="getResults"></div>
<div id="pages"></div>

我会使用这种 javascript：

function searchUrl(page) 
  return ' url("/ajaxCall") ?' + $("form").serialize() + '&page=' + page;


function showResult(page) 
  return $.get(searchUrl(page)).done(function (result) 
    // render result records
    $("#getResults").empty();
    result.data.forEach(function (record) 
      $("<div>... " + record.web_name + "......." + record.web_link + "...</div>").appendTo("#getResults");
    );

    // render pagination links
    $("#pages").empty();
    for (let p = 1; p <= result.last_page; p++) 
      if (p === result.current_page) $('<span>' + p + '</span>').appendTo("#pages");
      else $('<a href="' + searchUrl(p) + '">' + p + '</a>').appendTo("#pages");
    
  ).fail(function(xhr, status, thrownError) 
    console.error(xhr.status, thrownError);
  );


$(function () 
  $("form").submit(function (event) 
    event.preventDefault();
    showResult(1);
  );
);

【讨论】：

我收到一个错误result.data.forEach is not a function

同样遵循您的脚本，为什么我们在文档加载时使用showResult(1); 而不是showResult(' url("AJAXPAGE") ');

@JohnFurgeson 上面的代码并不是要被复制的。上面的代码是为了研究然后适应你的需要。我不知道result 在你的情况下是什么 - 你的服务器发送了一些东西，而你从未展示过它。我正在从文档中做出假设。在浏览器的开发人员工具中设置断点，查看实际获得的数据，并进行必要的更改。

“为什么我们在加载文档时使用 showResult(1); 而不是 showResult(' url("AJAXPAGE") ')” - 这不是加载文档。那是在表单提交上。您希望在用户单击 Search 时加载第 1 页。

我完全理解代码，除了我如何处理function() 括号中的结果。当我打开查询所基于的 URL 时，我得到了我期望的结果。但是如何在函数括号中处理它们？