如何使用Laravel和jQuery對查詢結果進行分頁

我正在嘗試轉換此靜態查詢

$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 分頁？如果有人幫助，我將不勝感激。

uj5u.com熱心網友回復：

根據檔案，當您使用分頁到 JSON 結果時從 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);
  });
});

標籤：查询 阿贾克斯 拉拉维尔 分页

上一篇：Axios|阿賈克斯|獲取異步等待JS|XMLHttpRequest|哪些是最好的PHP作業？

下一篇：BoostrapJS包和AJAX之間是否可能存在沖突？