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

Posted 2023-04-14

【中文标题】ajax查询后如何更新knppaginatorbundle的分页模板

【英文标题】：How to update pagination template of knppaginatorbundle after ajax query

【发布时间】：2015-11-15 21:30:02

【问题描述】：

我正在使用 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

【问题讨论】：

knppaginatorbundle 不是为通过 javascript 更新而设计的。

那我该怎么办？

我不知道，但可能使用像 jPaginate 这样的 javascript 库：tympanus.net/jPaginate

【参考方案1】：

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

您可以使用该捆绑包https://github.com/nacholibre/knppaginator-ajax

您应该在控制器中构建新的分页字符串并将其作为参数发送到JsonResponse。然后在成功时通过 jQuery 替换 DOM 中的分页元素。

对于 SF 4.3，您可以使用我的方法

为了能够在控制器中注入Processor，您必须在services.yaml中添加自动装配别名

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

基于注入的PaginatorInterface，您应该构建您的$pagination 对象(PaginationInterface)

使用Processor 为Twig 构建context 数组。

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

render 方法需要 SlidingPagination 对象，但得到 $pagination 即 PaginationInterface - 但似乎没问题

获取 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"])