数据表基于按钮单击事件隐藏和显示行 [英] Datatable hide and show rows based on a button click event
问题描述
所以我有这个由 php 动态生成一次的数据表.但是一旦它被加载，我不想重新加载整个表，因为我正在做的只有一个小的 javascript if 语句.当您按下按钮时，我会比较 tr 上的数据属性.如果不合适，我想隐藏它们，否则，我想显示它们.所以这是我到目前为止尝试过的.
HTML
<button class="btn btn-primary" id="myClientButton">Voir mes clients seulements</button><table id="advancedSearchTable"><头><tr><th>姓名</th><th>电话</th><th>电子邮件</th><th>主题</th><第>日期</th><th>个人资料</th></tr></thead>
{% for entity in entity %}<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-eye-打开"></span></a></td></tr>{% 结束为 %}</tbody>循环是在 Symfony 2 中制作的(使用 Twig 模板，如果你不理解它并不重要)你需要明白的是data-user"上的属性是由 PHP 创建的，并且我的数据库的每个条目都在这个循环中进行.
然后，在 jQuery 中我有这个:
效果很好.唯一的问题是 DataTable 并没有自我替换".因此，例如，如果它有 25 个页面，它会保留 25 个页面，当您按下下一个表格页面"按钮时，它会刷新表格页面"并且不再隐藏内容.我搜索了很多，但找不到方法.我真的不想为此使用 ajax，因为它只需要填充一次值，然后它只需要隐藏或显示取决于按钮是否处于活动状态......甚至可以使用这个 jQuery插件?
提前致谢.
解决方案 是的，这确实是可能的，但是您需要一种不同的方法.使用 jQuery 而不是通过 dataTables 本身隐藏行通常是一个坏主意，因为 dataTables 不知道对 DOM 中原始 元素所做的更改.没有代码中的某个地方-另一个脚本-已隐藏的行"-事件数据表可以挂钩.这就是为什么 dataTables 似乎忘记"了更改，它根本不知道这些更改，并且 dataTables 内部保持不变.因此请改用自定义过滤器.下面的一小段代码可以满足您的需求 - 隐藏具有与 5 不同的 data-user 属性的所有行.它适用于排序和分页.最后一段代码是一个重置按钮的例子.
$("#hide").click(function() {$.fn.dataTable.ext.search.push(功能(设置，数据，数据索引){返回 $(table.row(dataIndex).node()).attr('data-user') == 5;});table.draw();});$("#reset").click(function() {$.fn.dataTable.ext.search.pop();table.draw();});
演示 -> 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 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.
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/
这篇关于数据表基于按钮单击事件隐藏和显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆