Javascript 在Symfony2 |条令|细枝项目中使用jQuery数据表-混合一些功能，使选择标记过滤器在数据表中显示结果

我正在做一个Symfony项目，使用Twig模板和Doctrine，使用

jQuery DataTables

在一些Twig页面中管理我的Doctrine数据

在我的数据库中，我有一些数据表之间的关系，如以下示例：

    adverts
+-------------+--------------+
| id          | int(11)      |
| ...         | ...          |
+-------------+--------------+

    adverts_categories 
+---------------+--------------+
| adverts_id    | int(11)      |
| categories_id | int(11)      |
+---------------+--------------+

    categories
+-------------+-------------+
| id          | int(11)     |
| ...         | ...         |
+-------------+-------------+

这是我的控制器：

public function indexAdvertsAction() {

       $em=$this->getDoctrine()->getManager();
       $advert= $em->getRepository('MySpaceMyBundle:Adverts')->findAll();

       return $this->render('MySpaceMyBundle:MyFolder:indexAdverts.html.twig', array('advert' => $advert ));
}

然后在细枝中，我在

中显示结果，如下所示：

<table id="dataTableAdvert">
     <thead>
          <tr>
              <th>Id</th>
              <th>Users</th>
              <th>Name</th>
              <th>Categories</th>
              <th>Location</th>
              <th>Comment(s)</th>
              <th>Action</th>
          </tr>
     </thead>
     <tfoot>
          <tr>
              <th>Id</th>
              <th>Users</th>
              <th>Name</th>
              <th>Categories</th>
              <th>Location</th>
              <th>Comment(s)</th>
              <th>Action</th>
          </tr>
     </tfoot>
     <tbody>
       {% for adverts in advert%}
         <tr>
           <td>{{ adverts.id }}</td>
           <td>{{ adverts.name }}</td>
           <td>{{ adverts.users }}</td>
           <td>
             {% for category in adverts.categories %}
                 {{ adverts.categories }}
             {% endfor %}
           </td>
         </tr>
       {% endfor %}
    </tbody>
</table>

有人能帮我组织和制作这些功能吗

---

提前谢谢。

我的建议是使用比DataTables更复杂的工具

我在类似这样的用户界面方面取得了一些成功。如果表选择工具满足用户UI交互性要求，则可以尝试使用。如果需要，还可以使用数值范围选择工具

学习需要一段时间，但从长远来看是值得的

$(document).ready(function() {
    var table = $('#dataTableAdvert').DataTable({
        initComplete: function () {
            var api = this.api();
            api.columns().indexes().flatten().each( function ( i ) {
                //select tag search input under colum 1
                if (i == 1) {
                    var column = api.column( i );
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        });
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    });
                }
                //select tag search input under colum 2
                if (i == 2) {
                    var column = api.column( i );
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        });
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    });
                }
            });
        },
        "dom": 'C<"clear">lfrtip',
        responsive: true,
    });
});