Filter columns with DataTables Buttons based on attribute value

Question

I have a custom button above my DataTables. When pressed I want it to filter the first column on a attribute value since this column cells only contain images (flags of countries/regions).

My table looks like this:

<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>

This is my initilization:

$('#example').DataTable({
    buttons: [
        {
            text: "Filter: USA",
            action: function(e, dt, node, config){
                dt.column(0).search("United States").draw();
            }
        }
    ]
})

However this doesn't do anything unfortunately. What am I doing wrong?

I used Buttons collection, Buttons.action and column.search() as reference.

CMedina · Accepted Answer · 2016-06-01 17:08:47Z

2

Remember import datatTables.buttons.js

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

change your attr data-order by data-search (check HTML5 attr https://datatables.net/examples/advanced_init/html5-data-attributes.html)

...
<td data-search="United States"><img src="img/region_usa.png"></td>
...

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

});

Result : https://jsfiddle.net/cmedina/7kfmyw6x/63/

edited Jun 1, 2016 at 17:08

answered Jun 1, 2016 at 16:59

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bob Over a year ago

Completely missed the data-search attribute. Thanks a lot!

Collectives™ on Stack Overflow

Filter columns with DataTables Buttons based on attribute value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related