選択変更後のsymfonyリロードテーブル

Question

私はユーザのテーブルを持っています。私はそれらを 'グループ'でフィルタリングできる必要があります。ユーザーがドロップダウンリストからオプションを選択したのでとき、私は、ページ全体だけユーザーテーブルは、そのグループからリロードして表示ユーザーしないようにしたい

これは、ユーザーテーブル

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 
    ]); 
} 

Answer 1

テーブルのみをリロードする場合は、次の操作を行います。

まず、テンプレートを作成します。コントローラ

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, 
     ])); 
    } 

で

table.html.twig

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

そして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); 
    }