数据表根据按钮单击事件隐藏和显示行
Datatable hide and show rows based on a button click event
所以我有这个数据table 由php 动态生成一次。但是一旦它被加载,我不想重新加载整个 table 因为我正在做的只有一个小的 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 不是 "replacing itself"。因此,例如,如果它有 25 页,它会保留 25 页,当您按下 "next table page" 按钮时,它会刷新 "table page" 并且不再隐藏内容。我搜索了很多,但找不到方法。我真的不想为此使用 ajax,因为它只需要用值填充一次,然后它只需要隐藏或显示,具体取决于按钮是否处于活动状态......它是否均匀可以使用这个 jQuery 插件吗?
提前致谢。
是的,这确实是可能的,但您将需要不同的方法。使用 jQuery 而不是通过 dataTables 本身隐藏行通常不是一个好主意,因为 dataTables 不知道对 DOM 中原始 <table>
元素所做的更改。没有 "somewhere-in-code-another-script-has-hidden-a-row"-event dataTables 可以挂钩。这就是为什么 dataTables 似乎 "forget" 发生了变化,它根本不知道这些变化,并且 dataTables 内部保持不变。
所以请改用 custom filter。以下一小段代码可以满足您的需求 - 隐藏所有 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();
});
根据此 https://datatables.net/examples/plug-ins/range_filtering.html 可以使用 data
参数按 table.
上显示的任何值进行过滤
$("button").click(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return data[3] != "63";
}
);
table.draw();
});
所以我有这个数据table 由php 动态生成一次。但是一旦它被加载,我不想重新加载整个 table 因为我正在做的只有一个小的 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 不是 "replacing itself"。因此,例如,如果它有 25 页,它会保留 25 页,当您按下 "next table page" 按钮时,它会刷新 "table page" 并且不再隐藏内容。我搜索了很多,但找不到方法。我真的不想为此使用 ajax,因为它只需要用值填充一次,然后它只需要隐藏或显示,具体取决于按钮是否处于活动状态......它是否均匀可以使用这个 jQuery 插件吗?
提前致谢。
是的,这确实是可能的,但您将需要不同的方法。使用 jQuery 而不是通过 dataTables 本身隐藏行通常不是一个好主意,因为 dataTables 不知道对 DOM 中原始 <table>
元素所做的更改。没有 "somewhere-in-code-another-script-has-hidden-a-row"-event dataTables 可以挂钩。这就是为什么 dataTables 似乎 "forget" 发生了变化,它根本不知道这些变化,并且 dataTables 内部保持不变。
所以请改用 custom filter。以下一小段代码可以满足您的需求 - 隐藏所有 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();
});
根据此 https://datatables.net/examples/plug-ins/range_filtering.html 可以使用 data
参数按 table.
$("button").click(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return data[3] != "63";
}
);
table.draw();
});