时间戳

首页 > 解决方案 > 带有 ajax 和 knpPaginatorBundle 的 symfony 过滤器

javascript - 带有 ajax 和 knpPaginatorBundle 的 symfony 过滤器

问题描述

我使用 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;
            })
        };

标签： javascriptphpajaxsymfonyknppaginatorbundle

解决方案

问题是您检查查询字符串但POST通过 ajax 发送请求。

您需要更改if(empty($request->request->all())){ajax$request->request->get("babysitter_search")请求。或发送GET请求

正确的方法是从表单数据中获取数据，而不是从请求中获取数据：

$form = $this->createForm(BabySitterFrontSearchType::class, null, [
    'method' => 'POST', // or GET
]);
$form->handleRequest($request);

if ($form->isSubmitted() && $form->isValid()) {
    $data = $form->getData();
    $listBabySitters = $this->babySitterRepository->findBabySitter($data["babysitter_search"]);
} else {
    $listBabySitters = $this->babySitterRepository->findBy(['status' => 1]);
}

同样在您的javascript中，您需要使用data: $(this).serializeArray()

推荐阅读