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

Question

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

$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 分页？如果有人提供帮助，我将不胜感激。

Answer 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);
  });
});