javascript - 根据属性值使用数据表按钮过滤列

Question

我的数据表上方有一个自定义按钮。当按下时，我希望它过滤属性值的第一列，因为该列单元格仅包含图像(国家/地区的标志)。

我的表格如下所示:

<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()作为引用。

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 更改您的 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();
        }
    }
    ]
})

});

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