数据表基于按钮单击事件隐藏和显示行

Question

所以我有一个动态生成的数据表一次.但是一旦它被加载,我不想重新加载整个表,因为只有一个小的javascript if我正在做的声明.当您按下按钮时,我会比较我的tr上的数据属性.如果它不合适,我想隐藏它们,否则,我想展示它们.所以这就是我到目前为止所尝试的内容.

HTML

    <div style="margin: 30px 0;">
        <button class="btn btn-primary" id="myClientButton">Voir mes clients seulements</button>
    </div>
    <table id="advancedSearchTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Subject</th>
                <th>Date</th>
                <th>Profile</th>
            </tr>
        </thead>
        <tbody>
            {% for entity in entities %}
                <tr data-user="{{ entity.user.id }}" class="values">
                    <td>{{ entity }}</td>
                    <td>{{ entity.mainphone }}</td>
                    <td>{{ entity.email }}</td>
                    <td>{{ entity.tagline }}</td>
                    <td>{{ entity.createdDate|date('d-m-Y') }}</td>
                    <td><a href="{{ path('clients_show', {id: entity.id}) }}" class="btn btn-success"><span class="glyphicon glyphicon-eye-open"></span></a></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

循环是在Symfony 2中制作的(使用Twig模板,如果你不理解它并不重要),你必须要了解的是,"data-user"的属性是由PHP创建的,并且每个条目都是我的数据库正在这个循环中.

然后,在jQuery我有这个:

<script>
$('#advancedSearchTable').DataTable(
    {
        "language": {
              "url": "//cdn.datatables.net/plug-   ins/9dcbecd42ad/i18n/French.json"
                    },
               responsive: true
            });
  $('#myClientButton').on('click', function(){
    if ($(this).hasClass('active')){
        $(this).removeClass('active');
        $('tr.values').show();
    }
    else{
        $(this).addClass('active');
        $('tr.values').each(function(){
            if ($(this).attr('data-user') != 5){
                $(this).hide();
            }
        });
    }
});
</script>

它工作得很好.唯一的问题是DataTable不是"替换自己".因此,例如,如果它有25页,它会保留25页,当您按下"下一页表"按钮时,它会刷新"表格页面",并且不再隐藏任何内容.我搜索了很多,但我找不到方法.我真的不想为此使用ajax,因为它只需要用值填充一次然后它只需要隐藏或显示,具体取决于活动的按钮...是否甚至可以使用此jQuery插入 ？

提前致谢.

Answer 1

是的,确实可以,但你需要一个不同的方法.使用jQuery而不是通过dataTables本身隐藏行通常是一个坏主意,因为dataTables不知道对<table>DOM中的原始元素所做的更改.没有"代码中的某个地方 - 另一个脚本 - 已隐藏的行"-event dataTables可以挂钩.这就是为什么dataTables似乎"忘记"变化,它根本不知道这些变化,并且dataTables内部保持不变.

因此,请改用自定义过滤器.下面的一小段代码可以执行您想要的操作 - 隐藏具有data-user不同属性的所有行5.它适用于排序和分页.最后一段代码是重置按钮的示例.

$("#hide").click(function() {
    $.fn.dataTable.ext.search.push(
       function(settings, data, dataIndex) {
          return $(table.row(dataIndex).node()).attr('data-user') == 5;
       }
    );
    table.draw();
});    
$("#reset").click(function() {
    $.fn.dataTable.ext.search.pop();
    table.draw();
});

演示 - > http://jsfiddle.net/d5hre2ux/