选择更改后,Symfony重新加载表

时间:2017-08-22 11:35:41

标签: javascript jquery symfony datatable twig

我有一张用户表。我需要能够通过' Group'来过滤它们。因此,当用户从下拉列表中选择选项时,我不希望整个页面只有用户表重新加载并显示该组中的用户

这是用户表的枝条

  Filter by group
  <select class="filter-users">
         <option selected></option>
         {% for group in groups %}
                <option>{{ group.name }}</option>
         {% endfor %}
   </select>
   <table id="dataTable">
         <tbody>
             {% for user in users %}
                  <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.fullName}}</td>
                    </tr>
              {% endfor %}
           </tbody>
       </table>

此操作以按组名称

获取用户
 /**
  * @Route("/filter", name="users_filter")
  */
  public function filterAction(Request $request)
  {
    $em = $this->getDoctrine()->getManager();

    $group = $request->request->get('group');

    $users = $em->getRepository('AppBundle:User')->findBy(['group' => group]);

    return $this->render('AppBundle:User:list.html.twig', [
        'users' => $users
    ]);
}

1 个答案:

答案 0 :(得分:0)

如果您只想重新加载表格,可以执行以下操作。

首先只使用表格创建模板。

<强> table.html.twig

       <table id="dataTable">
         <tbody>
             {% for user in users %}
                  <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.fullName}}</td>
                    </tr>
              {% endfor %}
           </tbody>
       </table>

在控制器中

public function indexAction(Request $request)
    {
       $em = $this->getDoctrine()->getManager();

       $group = $request->request->get('group');

       $users = $em->getRepository('AppBundle:User')->findBy(['group' => group]

       return new Response($this->renderView('table.html.twig', [
           'users' => $users,
       ]));
    } 

然后创建一个ajax调用

$('#select-button-div').on('change','#select-button',function() {
    reloadData();
});

function reloadData() {
        let data = {};
        let selected = $('#select-button').find(':selected').text();
        let usersTable = $('#entries');
        usersTable.empty();
        data['selectedVal'] = selected.val();
        let url = Routing.generate('ToYourRoute');
        table.load(url, data);
    }