Datatable基于按钮单击事件来隐藏和显示行 [英] Datatable hide and show rows based on a button click event
问题描述
HTML
< ; div style =margin：30px 0;>
< button class =btn btn-primaryid =myClientButton> Voir mes clients seulements< / button>
< / div>
< table id =advancedSearchTable>
< thead>
< tr>
< th>名称< / th>
< th>电话< / th>
< th>电子邮件< / th>
< th> Subject< / th>
< th>日期< / th>
< th>个人资料< / th>
< / tr>
< / thead>
< tbody>
{％为实体中的实体％}
< tr data-user ={{entity.user.id}}class =values>
< td> {{实体}}< / 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-睁眼>< /跨度>< / A>< / TD>
< / tr>
{％endfor％}
< / tbody>
< / table>
循环是在Symfony 2中制作的（使用Twig Template，如果你不明白它就不会真的很重要），所有你必须了解的是，数据用户的属性是由PHP创建的，并且我的数据库的每个条目都在这个循环中。
然后，在jQuery中，我有这个：
< script>
$（'＃advancedSearchTable'）.DataTable（
{
language：{
url：//cdn.datatables.net/plug- ins / 9dcbecd42ad /i18n/French.json
，
响应：true
}）; $（$（this）.hasClass（'active'））{
$（this）。
$（'＃myClientButton'）。（'click'，function（）{
。 removeClass（'active'）;
$（'tr.values'）。show（）;
}
else {
$（this）.addClass（'active'） ;（$（this）.attr（'data-user'）！= 5）{
$（$）这个）.hide（）;
}
}）;
}
}）;
< / script>
效果很好。唯一的问题是DataTable不会自我取代。所以，例如，如果它有25页，它会保留25页，当你按下下一个页面按钮时，它刷新表格页面，并且事物不再被隐藏。我搜索了很多，但我找不到方法。我真的不希望为此使用ajax，因为它只需要用值填充一次，然后它将只需要隐藏或显示取决于按钮被激活或不...是否甚至有可能使用这个jQuery插件？
预先感谢。
的确有可能，但你需要一种不同的方法。因为dataTables不知道对DOM中的原始< table> 元素所做的更改，所以使用jQuery而不是通过dataTables本身隐藏行通常是一个坏主意。没有某处在代码中的其他脚本具有隐藏行事件dataTables可以挂钩到。这就是为什么dataTables似乎忘记了更改，它根本不知道这些更改，并且dataTables内部保持不变。
因此，请使用 自定义过滤器 代替。下面的一小段代码做了你想做的事 - 隐藏所有具有不同于 5 的数据用户属性的行。它适用于整理和分页。最后一段代码就是重置按钮的一个例子。
$ b
$（＃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/
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.
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>
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.
Then, in jQuery I have this:
<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 ?
Thanks in advance.
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 not is 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. Thats why dataTables seems to "forget" changes, it is simply not aware of those changes, and the dataTables internals stay untouched.
So use a custom filter instead. The following small piece of code does what you want - hiding all rows having a data-user attribute different than 5. It works across sorting and pagination. The last piece of code is an example of a reset-button.
$("#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/
这篇关于Datatable基于按钮单击事件来隐藏和显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
