我在我的主页上有一个工作机会列表，每个5个优惠分页，当我滚动“loadScroll”div时，会附加分页 .
在我的主页上，我有一些过滤器可以显示仅包含所选 Contract 类型或扇区的工作机会 .
当我选择一个过滤器（复选框）时，我只是发布一个带有所选输入的表单，然后触发一个AJAX调用（functions.js） .
问题是，当我过滤我的优惠时，我会更新当前显示的优惠，但如果我滚动，则会对之前的优惠进行分页，并显示5个未过滤的优惠 .
我只是想更新分页，使用选定过滤器的当前优惠来完成这项工作
homepage.blade.php
<div class="filters">
<form method="post" action="/offers/filter/result" name="filterOffer" role="form">
<label>Contract types</label>
<button class="collapseButton" type="button" data-toggle="collapse" data-target="#collapseContractTypes" aria-expanded="false" aria-controls="collapseContractTypes">See contract types <i class="fa fa-chevron-right"></i></button>
<ul id="collapseContractTypes" class="collapse">
<li><input type="checkbox" name="contract_type[]" class="checkboxInput checkboxContract" checked="checked" value="all"><span class="checkboxSpan">All</span></li>
<?php $contract_types = \Illuminate\Support\Facades\Lang::get('vocabulary.contract_type'); ?>
@foreach($contract_types as $key => $contract_type)
<li><input type="checkbox" name="contract_type[]" class="checkboxInput checkboxContract" value="{{ $key }}"><span class="checkboxSpan">{{ $contract_type }}</span></li>
@endforeach
</ul>
<label>Activity sectors</label>
<button class="collapseButton" type="button" data-toggle="collapse" data-target="#collapseSectors" aria-expanded="false" aria-controls="collapseSectors">See activity sectors <i class="fa fa-chevron-right"></i></button>
<ul id="collapseSectors" class="collapse">
<li><input type="checkbox" name="sectors[]" class="checkboxInput checkboxSector" checked="checked" value="all"><span class="checkboxSpan">All</span></li>
<?php $sectors = \Illuminate\Support\Facades\Lang::get('vocabulary.sector_activity'); ?>
@foreach($sectors as $key => $sector)
@if ($sector['display'] == 1)
<li><input type="checkbox" name="sectors[]" class="checkboxInput checkboxSector" value="{{ $key }}"><span class="checkboxSpan">{{ $sector['name'] }}</span></li>
@endif
@endforeach
</ul>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="companyFilter" id="companyFilter" />
<?php
null !== request()->get('searchOffer') ? $offerFilter = request()->get('searchOffer') : $offerFilter = "";
?>
<input type="hidden" name="offerFilter" id="offerFilter" value="{{ $offerFilter }}" />
</form>
<label>By company</label>
<div class="inputGroupSidebar">
<input type="text" name="searchOffersByCompany" class="inputForm" id="searchOffersByCompany" placeholder="Search a company..." />
<div class="inputFormRightIcon">
<i class="fa fa-search"></i>
</div>
</div>
</div>
<div class="boxList showMenu" id="loadOffersContent">
@include ('website/offers/actions/load')
</div>
<div class="loadScroll">
<button class="buttonActionLg bgPrimary"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Loading offers...</button>
</div>
load.blade.php
@foreach ($offers as $offer)
<a class="boxEffect boxOffer" href="/offers/{{ $offer->id_offer }}">
<div class="boxHeader">
<h3 class="boxTitle">{{ $offer->title }}</h3>
<span class="boxLabel @lang('vocabulary.contract_type_bgcolors.' . $offer->contract_type)">@lang('vocabulary.contract_type.' . $offer->contract_type)</span>
<?php
$date = new \Carbon\Carbon($offer->created_at);
$date::setLocale('fr');
?>
<span class="boxDate">{{ $date->diffForHumans() }}</span>
</div>
<div class="boxSubtitle">
<p>{{ $offer->city }}</p>
</div>
<div class="boxContent">
<p>{{ $offer->description }}</p>
</div>
<div class="boxFooter">
<div class="boxLeftSide">
<span>Posted by : <small>{{ $offer->name ? $offer->name : $offer->email }}</small></span>
<span>Sector : <small>@lang('vocabulary.sector_activity.' . $offer->sector . '.name')</small></span>
</div>
<div class="boxRightSide rightArrow"></div>
</div>
</a>
@endforeach
functions.js
var page = 1;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
page++;
loadMoreData(page);
}
});
function loadMoreData(page) {
$.ajax({
type: 'GET',
url: '?page=' + page,
beforeSend: function() {
$('.loadScroll').show();
},
success: function(response) {
if (response.html == "") {
$('.loadScroll').html("<span class='colorPrimary'>No job offers has been found.</span>");
return;
}
$('.loadScroll').hide();
$("#loadOffersContent").append(response.html);
},
error: function (response) {
console.error(response);
notification('danger', "An error has occurred.");
}
});
}
$(document).on('submit', 'form[name=filterOffer]', function(event) {
event.preventDefault();
var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({
type: 'POST',
url: url,
data: data,
success: function(response) {
$('.boxList').hide().html($(response).find('.boxList').html()).fadeIn();
},
error: function (response) {
console.error(response);
notification('danger', "An error has occurred.");
},
});
});
HomeController.php （主页控制人）
public function index(Request $request)
{
$offers = DB::table('offers')
->leftJoin('users', 'offers.company_id', '=', 'users.id')
->leftJoin('companies', 'users.id', '=', 'companies.user_id')
->where([
['offers.valid', '=', true],
['offers.complete', '=', false],
])
->select('offers.id as id_offer', 'users.id as id_company', 'users.email', 'users.role', 'offers.title', 'offers.description', 'offers.contract_type', 'offers.duration', 'offers.remuneration', 'offers.valid', 'offers.complete', 'offers.created_at', 'offers.city', 'offers.sector', 'companies.name', 'companies.siret', 'companies.address', 'companies.phone')
->orderBy('offers.created_at', 'DESC')
->paginate(5);
if ($request->ajax()) {
$view = view('website/offers/actions/load',compact('offers'))->render();
return response()->json(['html' => $view]);
}
return view('website/index', ['offers' => $offers]);
}
OffersController.php （使用过滤器时触发控制器功能）
public function filterOffers(Request $request)
{
$contracts = Input::only('contract_type');
$sectors = Input::only('sectors');
$company_name = Input::only('companyFilter');
$offer_title = Input::only('offerFilter');
if (isset($contracts['contract_type'])) {
$contracts = $contracts['contract_type'];
}
if (isset($sectors['sectors'])) {
$sectors = $sectors['sectors'];
}
if (isset($company_name['companyFilter'])) {
$company_name = $company_name['companyFilter'];
} else {
$company_name = "";
}
if (isset($offer_title['offerFilter'])) {
$offer_title = $offer_title['offerFilter'];
} else {
$offer_title = "";
}
if (in_array("all", $contracts)) {
$contractsFile = Lang::get('vocabulary.contract_type');
$contractsKey = array();
foreach ($contractsFile as $key => $value) {
array_push($contractsKey, $key);
}
$contracts = $contractsKey;
}
if (in_array("all", $sectors)) {
$sectorsFile = Lang::get('vocabulary.sector_activity');
$sectorsKeys = array();
foreach ($sectorsFile as $key => $value) {
array_push($sectorsKeys, $key);
}
$sectors = $sectorsKeys;
}
$offers = DB::table('offers')
->leftJoin('users', 'offers.company_id', '=', 'users.id')
->leftJoin('companies', 'users.id', '=', 'companies.user_id')
->select('offers.id as id_offer', 'users.id as id_company', 'users.email', 'users.role', 'offers.title', 'offers.description', 'offers.contract_type', 'offers.duration', 'offers.remuneration', 'offers.valid', 'offers.complete', 'offers.created_at', 'offers.city', 'offers.sector', 'companies.name', 'companies.siret', 'companies.address', 'companies.phone')
->whereIn('offers.contract_type', $contracts)
->whereIn('offers.sector', $sectors)
->where([
['companies.name', 'LIKE', '%'.$company_name.'%'],
['offers.title', 'LIKE', '%'.$offer_title.'%'],
['offers.valid', '=', true],
['offers.complete', '=', false],
])
->orderBy('offers.created_at', 'DESC')
->paginate(5);
return view('website/index')->with(['offers' => $offers]);
}