我使用 ajax 过滤返回的数据。
在后端,我使用 Symfony 和 KnpPaginatorBundle。
现在,当我在没有过滤器的情况下显示数据和分页并且它可以工作并且当我在分页中单击第 2 页时。
例如,它也可以工作,但是当我使用 ajax 过滤时也可以工作,但是当我在分页中单击按钮 2 时,它会移动到没有过滤器的分页的第 2 页
例如,如果我使用 name = "david" 进行过滤,则返回的数据为 true 并且显示为 true,但是当我在第 2 页中单击进行分页时,我将移至不带过滤器的第 2 页(我获取不带过滤器的第 2 页的数据)
代码 sf:
/**
* @Route({
* "fr": "/list",
* "de": "/list",
* "en": "/list"
* } , options = { "expose" = true } , name="front.babysitter.list", methods={"GET"})
*
* @param Request $request
*/
public function list(Request $request){
$this->urls_intl = $this->getCurrentUrl("front.babysitter.list",[]);
$form = $this->createForm(BabySitterFrontSearchType::class, null);
if(empty($request->query->all())){
$listBabySitters = $this->babySitterRepository->findBy(['status' => 1]);
} else {
$listBabySitters = $this->babySitterRepository->findBabySitter($request->query->get("babysitter_search"));
}
$listBabySittersPaginate = $this->paginator->paginate(
$listBabySitters,
$request->query->get('page', 1),
$this->paginate
);
return $this->render('babysitter/list.html.twig',[
'listBabySitters' => $listBabySittersPaginate,
'form' => $form->createView()
]);
}
代码库:
public function findBabySitter($searchQuery, $distance = 10): array
{
$query = $this->createQueryBuilder('b')
->where('b.status = 1');
if (isset($searchQuery['spokLanguage']) && $searchQuery['spokLanguage']){
$query
->join('b.spokLanguages','sp')
->andWhere('sp.language in ( :language_id )')
->setParameter('language_id', $searchQuery['spokLanguage'])
;
}
}
//just example for filter
代码js:
var searchBabySitters = function(){
$("#ajax-form-search-babysitter").on('submit', function () {
$('.loading').show();
history.pushState(null, null, window.location.href+'?'+$('#ajax-form-search-babysitter').serialize());
$.ajax({
url: Routing.generate("front.babysitter.filter"),
type: "POST",
headers: { "cache-control": "no-cache" },
async: false,
cache: false,
data: $(this).serialize(),
success: function (XMLHttpRequest){
$('.loading').hide();
$('.list').html(XMLHttpRequest);
},
error: function (XMLHttpRequest, textStatus) {
if (textStatus !== 'abort')
{
var error = "TECHNICAL ERROR: unable to send login informations \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus;
$.growl.error({ message: error});
return false;
}
},
complete : function () {
}
});
return false;
})
};