如何使用knpvginator将锚点附加到url

我正在使用symfony 4.4开发一个电子商务网站。我有一个在页面中心有一个id="projects"的部分，所以你必须向下滚动才能到达它。这个部分是在我的ProductRepository中使用knp分页器构建的，使它能够与搜索表单一起使用，该部分的某些部分是指向另一个页面的链接，该页面也有一个你必须滚动到的产品部分。我想将#projects附加到URL，以将用户向下滚动到该部分，但我不知道如何用knp-paginator构建页面的方式来实现这一点。

我曾尝试将#projects附加到twitter_bootstrap_v4_pagination.html.twig(我在knp_ginator.yaml中定义的模板(内的路径，但当我这样做时，paginator不再工作，#projects也不会附加到url。

{% if pageCount > 1 %}
<nav>
{% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
{% set classSize = (size is not defined) ? '' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
<ul class="pagination{{ classAlign }}{{ classSize }}">

{% if previous is defined %}
<li class="page-item">
<a  class="page-link" rel="prev" href="{{ path(route, query|merge({(pageParameterName): previous})) }}#projects">&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</span>
</li>
{% endif %}

{% if startPage > 1 %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 1})) }}#projects">1</a>
</li>
{% if startPage == 3 %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 2})) }}#projects">2</a>
</li>
{% elseif startPage != 2 %}
<li class="page-item disabled">
<span class="page-link">&hellip;</span>
</li>
{% endif %}
{% endif %}

{% for page in pagesInRange %}
{% if page != current %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): page})) }}#projects">{{ page }}</a>
</li>
{% else %}
<li class="page-item active">
<span class="page-link">{{ page }}</span>
</li>
{% endif %}

{% endfor %}

{% if pageCount > endPage %}
{% if pageCount > (endPage + 1) %}
{% if pageCount > (endPage + 2) %}
<li class="page-item disabled">
<span class="page-link">&hellip;</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): (pageCount - 1)})) }}#projects">{{ pageCount -1 }}</a>
</li>
{% endif %}
{% endif %}
<li class="page-item">

</li>
{% endif %}

{% if next is defined %}
<li class="page-item">
<a class="page-link" rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}#projects">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }}&nbsp;&raquo;</a>
</li>
{% else %}
<li  class="page-item disabled">
<span class="page-link">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }}&nbsp;&raquo;</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}

如果我将#projects更改为在我的index.html.twig中不存在的另一个id，例如#randomId，则分页器工作正常，并且url被更改"；http://127.0.0.1:8000/home?page=2#randomId"，但这并不能解决我的问题。

注意：我还尝试手动将url更改为http://127.0.0.1:8000/home?page=2#projects它奏效了。我不知道为什么它不接受index.html.twig.中的现有id

如果需要，这里是控制器：

<?php
namespace AppController;
use AppDataSearchData;
use AppEntityContact;
use AppEntityContactDevis;
use AppEntityEvv;
use AppFormContactType;
use AppFormContactDevisType;
use AppFormSearchForm;
use AppRepositoryProduitRepository;
use AppRepositoryEvvRepository;
use SymfonyComponentHttpFoundationRequest;
use SymfonyComponentRoutingAnnotationRoute;
use SymfonyBundleFrameworkBundleControllerAbstractController;

/**
* @Route("/")
*/
class EnoveController extends AbstractController
{
/**
* @Route("/home", name="enove_index", methods={"GET","POST"})
*/
public function index(ProduitRepository $produitRepository, EvvRepository $evvRepository, Request $request , Request $request_contact, Request $request_devis, Swift_Mailer $mailer)
{
$contact = new Contact();
$contactdevis = new ContactDevis();
$data = new SearchData();
$evv = new Evv();
$data->page = $request->get('page',1);
$form_filter = $this->createForm(SearchForm::class, $data);
$form_filter->handleRequest($request);


//dd($data);
$evv = $evvRepository->findAll();
$produit = $produitRepository->findSearch($data);
$form_contact = $this->createForm(ContactType::class, $contact);
$form_contact->handleRequest($request_contact);

if($form_contact->isSubmitted() && $form_contact->isValid())
{
$contact = $form_contact->getData();
$this->addFlash('success', 'votre email à été acheminer à Enove');
$message = (new Swift_Message('Nouveau contact'))
// On attribue l'expéditeur
->setFrom($contact->getEmail())
// On attribue le destinataire
->setTo('zwayten111@gmail.com')
// On crée le texte avec la vue
->setBody(
$this->renderView(
'emails/contact.html.twig', compact('contact')
),
'text/html'
)
;
$mailer->send($message);
return $this->redirectToRoute('enove_index' ,
[
'produits' => $produit,
'form_filter' => $form_filter->createView(),
'evvs' =>$evv,
] );
}
$form_devis = $this->createForm(ContactDevisType::class, $contactdevis);
$form_devis->handleRequest($request_devis);
if($form_devis->isSubmitted() && $form_devis->isValid())
{
$contactdevis = $form_devis->getData();
$this->addFlash('success', 'votre email à été acheminer à Enove');
$message2 = (new Swift_Message('Devis'))
// On attribue l'expéditeur
->setFrom($contactdevis->getEmail())
// On attribue le destinataire
->setTo('zwayten111@gmail.com')
// On crée le texte avec la vue
->setBody(
$this->renderView(
'emails/contact_devis.html.twig', compact('contactdevis')
),
'text/html'
)
;
$mailer->send($message2);
//dd($contactdevis);
return $this->redirectToRoute('enove_index' ,
[
'produits' => $produit,
'form_filter' => $form_filter->createView(),
'evvs' =>$evv,
] );
}
//dump($request->request);
return $this->render(
'FrontEndEnove/index.html.twig',
[
'produits' => $produit,
'form_filter' => $form_filter->createView(),
'form_contact' => $form_contact->createView(),
'form_devis' => $form_devis->createView(),
'evvs' => $evv,
]
);
}
}

在我的情况下，我通过添加这个更改了ProductRpository

$query = $query->getQuery();

$pagination = $this->paginator->paginate($query,$search->page,6);
$pagination->setParam('_fragment', 'projects');
return $pagination;

问题仍然存在，猜猜我在模板中遇到了什么问题，jQuery迫使它回到顶部，我只需要删除它。

相关内容

最新更新

热门标签：