根据属性值使用数据表按钮筛选列

Question

我的DataTables上方有一个自定义按钮。按下时，我希望它过滤属性值上的第一列，因为此列单元格仅包含图像（国家/地区的标志）。

我的表如下所示：

<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();
            }
        }
    ]
})

然而，不幸的是，这没有任何作用。我做错了什么？

我使用 Button 集合、Buttons.action 和 column.search（） 作为参考。

Answer 1

记住导入datatTables.buttons.js

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>

按data-search更改您的吸引力data-order（查看HTML5 吸引力 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();
        }
    }
    ]
})
});

结果 ： https://jsfiddle.net/cmedina/7kfmyw6x/63/