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

所以我有这个由 php 动态生成的数据表。但是一旦加载，我不想重新加载整个表，因为我正在做的只有一个小的 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插入 ？

提前致谢。

是的，确实有可能，但您需要采用不同的方法。使用 jQuery 隐藏行而不是通过 dataTables 本身通常是一个坏主意，因为 dataTables 不知道对原始数据所做的更改<table>DOM 中的元素。没有“代码中的某个地方的另一个脚本有隐藏一行”事件数据表可以挂钩。这就是为什么 dataTables 似乎“忘记”更改，它根本不知道这些更改，并且 dataTables 内部保持不变。

所以使用一个自定义过滤器 https://datatables.net/examples/plug-ins/range_filtering.html反而。下面的一小段代码可以满足您的需求 - 隐藏所有具有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/ http://jsfiddle.net/d5hre2ux/