Symfony2 - KnpPaginator - AJAX/Embedded Controller

Question

I'm having an issue with Knp, an AJAX request, and a filter. I think I'm doing something very wrong here, but I am not sure how exactly KnpPaginator works internally, and I don't have the time to figure it out on this project.

Anyway, basically, my page has an embedded controller which renders a table on the page. When paginator is called from twig, it returns the route to the container page, which results in paginator failing to work with my GET requests to that uri.

I'm not sure if any of you have come across this - I'm happy to listen if there is a better solution to the problem (I'm quite sure there is). Here is my code:

CONTROLLER

     /**
     * Just a shell page
     *
     * @Route("/postmanagement/index")
     * @Template()
     *
     * @return array
     */
    public function indexAction()
    {
        $form = $this->createForm(new FilterPostsType(), null, array(
                'action' => $this->generateUrl('myblog_admin_postmanagement_filterposts'),
                'method' => 'POST'
            )
        );

    return array(
        'form' => $form->createView()
    );
}

    /**
     * Returns active posts and comments
     *
     * @param Request $request
     *
     * @return array
     */
    public function defaultAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

        $posts = $em->getRepository('ModelBundle:Post')->findBy(array(
                'active' => true
            )
        );

        $paginator = $this->get('knp_paginator');
        $pagination = $paginator->paginate($posts, $request->query->get('page', 1), 10);

        return $this->render("AdminBundle:PostManagement:_ajax-panel.html.twig", array(
                'isPost' => true,
                'posts' => $posts,
                'pagination' => $pagination
            )
        );
    }

    /**
     * @param Request $request
     *
     * @Route("/postmanagement/filter")
     *
     * @return array
     */
    public function filterPostsAction(Request $request)
    {
        $form = $this->createForm(new FilterPostType(), null, array(
                'action' => $this->generateUrl('myblog_admin_postmanagement_filterposts'),
                'method' => 'POST'
            )
        );

//        if ($request->isMethod('POST')) {
            $posts = null;
            $form->handleRequest($request);
            $data = $form->getData();
            $posts = $this->get('myblog.admin_manager')->filterPosts($data);

            switch ($data['type']) {
                case 'post':
                    $isPost = true;
                    $isComment = false;
                    break;
                case 'comment':
                    $isPost = false;
                    $isComment = true;
                    break;
            }
//        }

        $paginator = $this->get('knp_paginator');
        $pagination = $paginator->paginate($posts, $request->query->get('page', 1), $data['maxresults']);

        if (is_null($posts)) {
            return new NotFoundHttpException();
        } else {
            return $this->render('AdminBundle:PostManagement:_ajax-panel.html.twig', array(
                    'posts' => $posts,
                    'isPost' => $isPost,
                    'isComment' => $isComment,
                    'pagination' => $pagination
                )
            );
        }
}

I'm not posting the view here, since it is a simple render(controller(MyBundle:Controller:myAction)). As you can see, there is a form I'm submitting on the page, to filter the posts. That also poses a problem, since it seems paginator doesn't keep the query after I've run it through the filter.

Thanks for any help! I would love if someone has done this before and has come up with a better solution than my rather convoluted one (which also involves too many queries for my liking).

natnai natnai · Accepted Answer · 2015-03-10T18:45:13

I figured it out.

If anyone else would like to paginate with InfiScr trigger + KNPPaginatorBundle + filter (PHP), use this JS:

/**
 * Load more pagination handler
 */
var AjaxPagination = function (options) {
    AjaxProt.call(this, options);
    this.filter = options.filter;
    this.toJoinEl = options.toJoinEl;
    this.containerEl = options.containerEl;
    this.navContainer = options.navContainer;
    this.nextSelector = options.nextSelector;
    this.uri = options.uri;
};

AjaxPagination.prototype = Object.create(AjaxProt.prototype);

AjaxPagination.prototype.init = function () {
    var thisObj = this,
        uri = thisObj.uri;
    $(thisObj.navContainer).hide();
    $(document).on(thisObj.event, thisObj.targetEl, function (e) {
        e.preventDefault();
        thisObj.ajaxRequest(uri);
    });
};

AjaxPagination.prototype.ajaxRequest = function (uri) {
    var thisObj = this,
        page = $(this.nextSelector).attr('href').match(/\d+$/);
    $('#filter_bets_page').val(page);

    var data = $(this.filter).serialize(),
        method = this.method;

    console.log(data);

    $.ajax({
        url: uri,
        data: data,
        type: method,
        success: function (data) {
            thisObj.infiScrCallback(data);
        }
    });
};

AjaxPagination.prototype.infiScrCallback = function(data) {
    var thisObj = this;
    $(thisObj.navContainer).remove();

    if (thisObj.toJoinEl) {
        var filteredContent = $("<div>").append( $.parseHTML( data ) ).find( '.findable');
        var newPagination = $("<div>").append( $.parseHTML( data ) ).find( 'div.pagination-hidden' );
        $(thisObj.toJoinEl).append(filteredContent);
        $(thisObj.containerEl).append(newPagination);
    } else {
        $(thisObj.containerEl).append(data).fadeIn();
    }

    if (!$(thisObj.nextSelector).length) {
        $(thisObj.targetEl).fadeOut();
    }
};

Symfony2 - KnpPaginator - AJAX/Embedded Controller

1 Answers