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

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

我使用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-order更改您的attr data-search（查看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/

使用基于属性值

1 个答案: