Symfony 3/4: KpnPaginator сделано через AJAX

Question

В настоящее время я совершенствую свои навыки в Symfony 4. И я застрял в небольшой проблеме.

У меня есть веб-сайт, который представляет собой блог, в котором публикуются статьи.

Я хотел быдобавьте нумерацию страниц, чтобы я проверил KpnPaginator, и он работает очень хорошо.

---

Вот код ,

Контроллер :

 /**
 * @Route("/blog", name="blog")
 * @param ArticleRepository $repo
 * @param Request $request
 * @param PaginatorInterface $paginator
 * @return \Symfony\Component\HttpFoundation\Response
 */
public function index(ArticleRepository $repo, Request $request, PaginatorInterface $paginator)
{

    /*
     *  $repo = $this->getDoctrine()->getRepository(Article::class);
     */

    $articlesQuery = $repo->findAll();


    // Paginate the results of the query
    $articles = $paginator->paginate(
    // Doctrine Query, not results
        $articlesQuery,
        // Define the page parameter
        $request->query->getInt('page', 1),
        // Items per page
        5
    );

    return $this->render('blog/index.html.twig', [
        'controller_name' => 'BlogController',
        'articles' => $articles
    ]);
}

Вид :

{% extends 'base.html.twig' %}

{% block title %}Hello {{ controller_name }}!{% endblock %}

{% block body %}
<section class="articles" id="">

    {% for article in articles %}
        <article>
            <h2>{{ article.title }}</h2>
            <div class="metadata">Written on {{ article.createdAt | date('d/m/Y') }}
                at {{ article.createdAt | date('H:i') }}, in Politic Category
            </div>
            <div class="content"><img src="{{ article.image }}" alt="">{{ article.content | raw }}
                <a href="{{ path('blog_show', {'id': article.id}) }}" class="btn btn-primary">Read moree</a>
            </div>
        </article>
    {% endfor %}
</section>
<br>
{{ knp_pagination_render(articles) }}
{% endblock %}

---

Мой вопрос ,

Какможно ли заставить его работать через ajax-запрос?

Например, как только я нажимаю на ссылку, она не обновляет страницу, а загружает содержимое динамически?

Answer 1

Вам необходимо настроить обработчик onclick в JavaScript, который будет вызывать AJAX для вашего ArticleController.

Вы можете использовать что-то вроде этого:

$(document).ready(function() {

var $div = $('.articles');

$.ajax({
    method: 'GET',
    url: '/api/articles' + window.location.search,
    headers: {
        'Accept':'application/json',
        'Content-Type':'application/json'
    },
    dataType: 'json',
    success: function(data){
        $.each(data.items, function(key, article) {
            var html = articleTemplate(article);
            $div.append($.parseHTML(html));
        });
    }
});
});

const articleTemplate = (article) =>
`<article>
        <h2>${ article.title }</h2>
        <div class="metadata">Written on ${ article.createdAt }}
            at ${ article.createdAt }, in Politic Category
        </div>
        <div class="content"><img src="${ article.image }" alt="">${ article.content }
            <a href="{{ Routing.generate('blog_show', {'id': article.id}) }}" class="btn btn-primary">Read more</a>
        </div>
    </article>`;

При этом используется строка шаблона ES6 JavaScript для обновления HTML на вашей странице, поэтому вы можете удалить эту часть из шаблона Twig.Вам также необходимо установить FOSJSRoutingBundle, если вы хотите использовать маршруты в своем JavaScript - https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

Вам нужно будет заставить ваш ArticleController возвращать ответ JSON, который обработчик JavaScript будет использовать для обновления страницы.