Javascript 数据表基于按钮单击事件隐藏和显示行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30086341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatable hide and show rows based on a button click event
提问by Yann Chabot
So I have this datatable that is generated by php dynamically once. But once it's loaded, I don't want to reload the whole table since there's only a small javascript if statement that I am doing. When you press the button, I compare a data attribute that is on my tr. If it doesn't fit, I'd like to hide them, else, I'd like to show them. So here is what I tried so far.
所以我有这个由 php 动态生成一次的数据表。但是一旦它被加载，我不想重新加载整个表，因为我正在做的只有一个小的 javascript if 语句。当您按下按钮时，我会比较 tr 上的数据属性。如果不合适，我想隐藏它们，否则，我想显示它们。所以这是我到目前为止所尝试的。
HTML
HTML
<div style="margin: 30px 0;">
<button class="btn btn-primary" id="myClientButton">Vtheitroad 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>
The Loop is made in Symfony 2 (Using Twig Template, if you don't understand it it doesn't really matter) all you have to understand is that the attribute on "data-user" is created by PHP and that every entry of my database is going in this loop.
循环是在 Symfony 2 中制作的（使用 Twig 模板，如果你不理解它并不重要）你需要理解的是“data-user”上的属性是由 PHP 创建的，并且每个条目我的数据库正在这个循环中。
Then, in jQuery I have this:
然后，在 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>
It works very well. The only problem is that the DataTable then is not "replacing itself". So, for example, if it has 25 pages, it keeps 25 pages and when you press on the "next table page" button, it refreshes the "table page" and things are not hidden anymore. I searched alot but I couldn't find a way. I really don't want to use ajax for this, since it only need to be filled once with value and then it will only have to hide or show depending on the button being active or not... Is it even possible using this jQuery plugin ?
它运作良好。唯一的问题是 DataTable 并没有“自我替换”。因此，例如，如果它有 25 个页面，它会保留 25 个页面，当您按下“下一个表格页面”按钮时，它会刷新“表格页面”并且不再隐藏内容。我搜索了很多，但找不到方法。我真的不想为此使用 ajax，因为它只需要填充一次值，然后它只需要隐藏或显示取决于按钮是否处于活动状态......甚至可以使用这个 jQuery插入 ？
Thanks in advance.
提前致谢。
回答by davidkonrad
Yes, it is indeed possible, but you will need a different approach. Hiding rows with jQuery and not through dataTables itself is generally a bad idea, since dataTables is not aware of changes made to the original <table>element in DOM. There is no "somewhere-in-code-another-script-has-hidden-a-row"-event dataTables can hook into. That is why dataTables seems to "forget" changes, it is simply not aware of those changes, and the dataTables internals stay untouched.
是的，这确实是可能的，但您需要一种不同的方法。使用 jQuery 而不是通过 dataTables 本身隐藏行通常是一个坏主意，因为 dataTables 不知道对<table>DOM 中的原始元素所做的更改。没有“代码中的某个地方-另一个脚本-已隐藏的行”-事件数据表可以挂钩。这就是为什么 dataTables 似乎“忘记”了更改，它根本不知道这些更改，并且 dataTables 内部保持不变。
So use a custom filterinstead. The following small piece of code does what you want - hiding all rows having a data-userattribute different than 5. It works across sorting and pagination. The last piece of code is an example of a reset-button.
因此，请改用自定义过滤器。下面的一小段代码执行您想要的操作 - 隐藏所有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();
});
demo -> http://jsfiddle.net/d5hre2ux/
回答by fgfernandez0321
According to this https://datatables.net/examples/plug-ins/range_filtering.htmlit is possible to use dataparameter to filter by any value shown on the table.
根据这个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();
});
