我的数据表上方有一个自定义按钮。当按下时,我希望它过滤属性值的第一列,因为该列单元格仅包含图像(国家/地区的标志)。
我的表格如下所示:
<table id="example">
<thead>
<tr>
<th>Region</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-order="United States"><img src="img/region_usa.png"></td>
<td>George</td>
<td>Washington</td>
</tr>
<tr>
<td data-order="Europe"><img src="img/region_eur.png"></td>
<td>Michael</td>
<td>Ferguson</td>
</tr>
<tr>
<td data-order="Japan"><img src="img/region_jap.png"></td>
<td>Yuka</td>
<td>Sakamari</td>
</tr>
</tbody>
</table>
这是我的初始化:
$('#example').DataTable({
buttons: [
{
text: "Filter: USA",
action: function(e, dt, node, config){
dt.column(0).search("United States").draw();
}
}
]
})
但是不幸的是,这并没有起到任何作用。我做错了什么?
我用了Buttons collection , Buttons.action和 column.search()作为引用。
最佳答案
记住导入datatTables.buttons.js
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
通过 data-search
更改您的 attr data-order
(检查 HTML5 attr https://datatables.net/examples/advanced_init/html5-data-attributes.html )
...
<td data-search="United States"><img src="img/region_usa.png"></td>
...
并指出dom
。
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
text: "Filter: United States",
action: function(e, dt, node, config){
dt.column(0).search("United States").draw();
}
}
]
})
});
关于javascript - 根据属性值使用数据表按钮过滤列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37573213/