KnpPaginatorBundle med JQuery partiell postback

Detta inlägg fortsätter tidigare inlägg Pagination in Symfony2 with KnpPaginatorBundle.

Först och främst bör du lägga jQuery till din kvist mall. Jag rekommenderar att du inte ladda ner jQuery och placera den i dina tillgångar, men i stället inkludera det i din rubrik så här:

Som kommer att spara lite bandbredd och det finns en stor chans att webbläsaren besöker din webbplats redan har jQuery-latest.min.js redan i sin cache.

Partiella postbacks kommer att påskynda användarupplevelsen eftersom vi inte behöver ladda om hela sidan varje gång vi byter sida i paginering, bara tabellen. Så först måste vi göra är att skapa en ny rutt som kan hantera postback och samtidigt som vi måste hålla den gamla vägen funktionalitet i fall att webbläsaren klienten inte har JavaScript. Så låt oss börja med styrenheten.

/**
 * Lists all Person entities.
 *
 * @Route("/", name="person")
 * @Template()
 */
public function indexAction()
{
    $paginator = $ this- & gt; getList();
    return array("Paginator '= & gt; $ paginator);

}

/**
 * Lists all Person entities.
 *
 * @Route("/personListPostBack /", name="person_list_postback")
 * @Template()
 */
public function generatePersonListPostbackAction(){
    $paginator = $ this- & gt; getList();    
    återvända $ this- & gt; render('MLKBackEndBundle:Person:_personList.html.twig ', array("Paginator '= & gt; $ paginator));
}

/**
 * Genererar personList
 * @return  Zend  paginator  paginator 
 */
private function getList(){
    $em = $ this- & gt; getDoctrine()-& Gt; getEntityManager();
    $dql = "Select a from MLKBackEndBundle:Person a";
    $fråga = $ sysselsatt & gt; createQuery($dql);

    $adapter = $ this- & gt; få('knp_paginator.adapter');
    $adapter- & gt; setQuery($query);
    $adapter- & gt; setDistinct(true);

    $paginator = new \Zend\Paginator\Paginator($adapter);
    $paginator- & gt; setCurrentPageNumber($detta- & gt; få('request')-& Gt; query- & gt; få('page', 1));
    $paginator- & gt; setItemCountPerPage(5);
    $paginator- & gt; setPageRange(5);
    retur $ paginator;
} 

Nu kan uppdatera vyn:

{% extends '::base.html.twig' %}
{% block body %}

Person list

{% inkludera "MLKBackEndBundle:Person:_personList.html.twig ' %}
{% endblock %} {% blockera javascripts %} {% endblock %}

Som ni kan se tabellen generationen har flyttats till _personList.html.twig och om du har en titt i PersonController kan du se att generatePersonListPostbackAction använder också att kvist.

Om vi ​​tittar på javascript kan vi se att det ser ut för element med klassen paginator och sedan finner en attribues som är inne i dem (som i <a href). När en länk klickas uppdaterar innehållet i elementet med id person_list med vad som återvänt från webbadressen som lagras i JavaScript variabel länk.

Länken skapas med kvistar konturfunktion (som echos url av rutten) och då vi lägga till det ursprungliga inlägget data från webbadressen med hjälp av en reguljärt uttryck.

Wow det var ganska många av information. Låt oss ta en titt på _personList.html.twig och se om vi kan runda allt upp.



    {% for entity in paginator %}
        
    {% endfor %}
    
{{ paginator|sortable('Id', 'a.id') }} {{ paginator|sortable('Firstname', 'a.firstName') }} {{ paginator|sortable('Lastname', 'a.lastName') }} {{ paginator|sortable('Birthday', 'a.birthday') }} Actions
{{ entity.id }} {{ entity.firstName }} {{ entity.lastName }} {% if entity.birthday %}{{ entity.birthday|date('Y-m-d') }}{% else %}No Value{% endif %}
{{ paginator|paginate }}

Som ni ser inte mycket har förändrats här, klassen av rubriker få ställa till “paginering” och som ni kanske har märkt i den första delen när paginator återges det skapar en div med klassen “paginator” så att vi inte behöver lägga till något där.

Det var många av information, men förhoppningsvis du understandeverything. Om inte, gärna skicka dina frågor här nedan eller på #symfony @ irc.freenode.net.

May the force be with you!

Leave a Reply

  • (kommer inte att publiceras)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>