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

Posted 2023-05-07

【中文标题】基于按钮单击事件的数据表隐藏和显示行

【英文标题】：Datatable hide and show rows based on a button click event

【发布时间】：2015-07-17 03:45:47

【问题描述】：

所以我有这个由 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插件？

提前致谢。

【问题讨论】：

我认为这是因为您隐藏了客户端元素，并且当您对数据表进行分页时，它会检索一组新数据，该数据集不知道您之前隐藏的内容。实际上，您正在尝试将服务器端数据与客户端过滤一起使用。

不，我正在使用客户端隐藏。它显然不起作用，因为我隐藏的数据不是在数据表中计算的。例如，我隐藏了一半的行，但它仍然说“显示 150 个项目中的 20 个”（例如）......我可以刷新数据表吗？

如果您刷新数据表，您的行将再次显示，因为基础数据没有更改。

【参考方案1】：

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

所以请改用custom filter。以下一小段代码可以满足您的要求 - 隐藏所有具有不同于 5 属性的 data-user 属性的行。它适用于排序和分页。最后一段代码是一个重置按钮的示例。

$("#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/

【讨论】：

它运行良好，但我在数据表文档中找不到它。您是在创建自己的函数以使其正常工作，还是它是 Datatables 中已经存在的函数？

当页面中有两个表格时，我无法完成这项工作。我只想过滤一个特定的表，但都使用此代码过滤。你能帮帮我吗？

最后发现我必须使用settings 添加支票，比如if (settings.sTableId != "first_table") return true;。我认为没有其他方法可以解决这个问题。

嗨，很抱歉迟到了，但是这段代码对我不起作用:(这个函数根本不会被调用。有什么建议吗？

@davidkonrad 哈哈，我认为申请起来会非常复杂。感谢您的直截了当的回答 XD

【参考方案2】：

根据这个https://datatables.net/examples/plug-ins/range_filtering.html 可以使用data 参数按表中显示的任何值进行过滤。

$("button").click(function() 
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) 
          return data[3] != "63";
        
    );
    table.draw();
);  

【讨论】：

data 对象基本上具有 td cols，但 OP 希望通过 tr 本身的数据属性进行搜索。这就是为什么他需要在接受的答案中使用 .node