ajax查询后如何更新pagination分页模板

Question

我使用knppaginatorbundle创建分页。我已经创建了一个jquery代码来使用ajax选择数据。

当我点击页面编号时，所有的内容都会被正确的数据加载。但是我有一个问题，在ajax查询之后，分页模板不会被更改：

• 上一个和下一个链接值必须更改
• 必须禁用当前页。
• 还有其他需要做的改变..。

我该怎么做？

public function listAction($page, Request $request)
{
    $em = $this->getDoctrine()->getManager();
    $paginator = $this->get('knp_paginator');
    $qb = $em->getRepository('AppBundle:Travel')->getListTravels();
    $pagination = $paginator->paginate(
        $qb, $request->query->get('page', $page), 3
    );

    //ajax request
    if ($request->isXmlHttpRequest()) {

        $view = $this->renderView('@App/Frontend/Travel/list.html.twig', array(
            'pagination' => $pagination
        ));

        $response = new JsonResponse(array('ok' => $view));
        return $response;
    }

    return $this->render('AppBundle:Frontend/Travel:travel-list-view.html.twig', array(
        'pagination' => $pagination,
    ));
}

我在分页模板中添加了一个attr数据目标，如下所示：

<a data-target="{{ page  }}" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>

视图

//.....
<div id="mydiv">

   // list.html.twig contains the loop
   {% include "AppBundle:Frontend/Travel:list.html.twig" %}

</div>
<br>
{{ knp_pagination_render(pagination) }}
//....

    <script>
    $(document).ready(function () {

        $("ul#pagination a").click(function (e) {
            e.preventDefault();
            var dataTarget = $(this).attr("data-target"); // each <a> has attr named data-target contains num of page
            var hash;
            hash = 'page=' + dataTarget;
            window.location.hash = hash;

            if (window.location.hash != "") {

                $.ajax({
                    type: 'get',
                    dataType: 'json',
                    url: Routing.generate('frontend_travels_list', {'page': dataTarget}),
                    success: function (msg) {
                        if (msg["ok"] === undefined) {
                            alert('error');
                        } else {
                            $("#mydiv").html(msg["ok"]);
                        }
                    }
                });
            }

        });

    });
</script>

路由

frontend_travels_list:
path:     /travels/{page}
defaults: { _controller: AppBundle:TravelFrontend:list, page: 1 }
options:
    expose: true

Answer 1

如果其他人需要一个解决方案，有两种方法。

1. 您可以使用这个包https://github.com/nacholibre/knppaginator-ajax
2. 您应该在控制器中构建新的分页字符串，并将其作为param在JsonResponse中发送。然后在成功的情况下通过jQuery替换DOM中的分页元素。

对于SF4.3，您可以使用我的方法

1. 要在控制器中注入Processor，必须在services.yaml中为自动装配添加别名

Knp\Bundle\PaginatorBundle\Helper\Processor: '@knp_paginator.helper.processor'

1. 基于注入的PaginatorInterface，您应该构建$pagination对象(PaginationInterface)
2. 使用Processor为Twig构建上下文数组。

$paginationContext = $processor->render($pagination);

render方法需要SlidingPagination对象，但获得了$pagination，即PaginationInterface --不过，这似乎是可以的。

1. 获取Twig并呈现最后的字符串。

$twig = $this->get('twig');
$paginationString = $twig->render($pagination->getTemplate(), $paginationContext);

工作控制器实例

if ($request->isXmlHttpRequest()) {
    $view = $this->render('@App/Frontend/Travel/list.html.twig', array(
        'pagination' => $pagination
    ))->getContent();
    $paginationContext = $processor->render($pagination);
    $twig = $this->get('twig');
    $paginationHtml = $twig->render($pagination->getTemplate(), $paginationContext);
    $response = new JsonResponse(['view' => $view, 'paginationHtml' => $paginationHtml]);
    return $response;
}

然后在jQuery

success: function (msg) {
    if (msg["ok"] === undefined) {
        alert('error');
    } else {
        $("#mydiv").html(msg["view"]);
        $("#myDivContainingPagination").html(msg["paginationHtml"])
    }
}