Querying table based on button

[smisra78]

Hi, I'm trying to filter my dynatable based on a button. In my table, I have a column that displays the number of unread messages. What I would like my button to do is to show only the rows where the number of messages >= 1.

As a starting point, I am trying to recreate the querying example provided in the documentation, but I'm having difficulty with that: https://jsfiddle.net/L4marhn5/ - in the jsfiddle, nothing happens as you change the input. Am I missing something in how the table is set up?

Here is how I am reworking for my use case (I am also using jQuery and knockout), I have a button:

<button id="viewUnread">
     <span style="float:left">Messages:&nbsp;</span>
     <span style="float:right" data-bind="text: coach().unreadMessages">#</span>
</button>

And I set up my table like below (note, I am using json for my data and I have a delegate so I can click on each row):

$('#paginated')
    .bind('dynatable:init', function(e, dynatable) {
        dynatable.queries.functions['viewUnread'] = function(record, queryValue) {
            return record.unreadMessages >= 1;
        };
    })
    .dynatable({
        dataset: { records: patientsData },
        inputs: { queries: $('#viewUnread') }
    })
    .delegate('tr', 'click', function() {
        var data = [];
        $(this).find('td').each(function (i, el) {
            data.push($(el).html());
        });
        if(data[0] != null) {
            self.viewPatient(data[0], data[1], data[2]);
        }
    });

I have tried changing the dynatable:init to dynatable:afterUpdate, but I just end up with an infinite load...

Finally, my table looks like:

<table id="paginated">
    <thead>
        <tr>
            <th id="dynatable" data-dynatable-column="firstName" style="display: none"></th>
            <th id="dynatable" data-dynatable-column="lastName" style="display: none"></th>
            <th id="dynatable" data-dynatable-column="userId" style="display: none"></th>
            <th id="dynatable" data-dynatable-column="unreadMessages">unreadMessages</th>
            <th id="dynatable" width="80%" data-dynatable-column="profileHTML">Patient Profile</th>
            <th id="dynatable" width="10%" style="text-align: center" data-dynatable-column="unviewedMealsHTML">Meals</th>
            <th id="dynatable" width="10%" style="text-align: center" data-dynatable-column="unreadMessagesHTML">Messages</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

I think if I could just understand the documented example, I could probably get somewhere, but if anyone has any insight based on what they see above, I would truly appreciate a point in the right direction.