javascript - 在 Symfony2 中使用 jQuery 数据表 |学说| Twig 项目 - 混合一些功能以使选择的标签过滤器在数据表中显示结果

Question

我正在开发一个 Symfony 项目，使用 Twig 模板和 Doctrine，使用 jQuery DataTables用于在一些 Twig 页面中管理我的学说数据。

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

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

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

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

这是我的 Controller :

public function indexAdvertsAction() {

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

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

然后在 twig 中，我将结果显示在 <table> 中像这样:

<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>

所以显示结果的一切都很好，除了响应式。

我想通过混合一些不同的功能来使用 jQuery DataTables。

看这张图:

这张图片采用了 jQuery dataTables 可能性的一些示例。我已经使用 ColVis 扩展。但实际上，我想添加另外三个参数:

• 使用 Custom filtering - range search但正如您在我的图片上看到的，我想要 tags而不是输入文本。当我在此选择中选择一个值(例如用户)时，结果将显示在我的数据表中。在这种情况下，我可以删除用户和类别列。

• 此外，我不想在页面启动时显示用户列，就像你所看到的，使用 ColVis，我可以隐藏或显示我想要的列。我希望用户列一开始不可见，除非我在 ColVis 中选择用户复选框来显示用户列。

• 使我的数据表真正具有响应能力，因为目前我的数据表不会在面板主体中折叠。

现在这是我的数据表的 javascript 代码:

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

有人可以帮助我组织和制作这个功能吗？

提前谢谢您。

Answer 1

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

我在 Simile Exhibit 方面取得了一些良好的成功对于这样的用户界面。您可以尝试Presidents example用于表选择工具(如果满足用户 UI 交互性要求)。如果需要，还有数值范围选择工具。

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