Filtering rows based on their element's attributes

jp_ptn

Hello, everyone

I was wondering if it's possible to filter rows by iterating through their DOM elements, so I don't have to pollute the data actually being displayed just for the filtering to work.

For example, let's imagine a table with a column "date". I would have a "weekday" select, and instead of forcefully adding the weekday to the data, I would add it to the tr element (for example, <tr data-iso-weekday="1">…</tr>). Then, on changing the select's value, something like this would run (it's pseudo-code, just an example of what I'd like to use):

// iterate through each row
$('#test-table').DataTable().rows().each(function(el) {  

    // filter (show) if its data-iso-weekday attribute equals the selected value
    $(this).filter($(el).data('iso-weekday') == selectedIsoWeekday);

}).draw();

Is there any easy-ish way to do this, or is hidden values or adding parseable data-search attributes to the cells the only way?

kthorngren

Sounds like you want to use HTML5 data attributes as documented in the Orthogonal Data docs. See this example.

Kevin

jp_ptn

That's the best alternative I had come up with before posting, but I thought that, for example, having:

<tr 
  data-student="23" 
  data-class="14" 
  data-class-type="3" 
  data-iso-weekday="1">
   ...
</tr>

Would be more elegant and precise than:

<tr>
    <td data-search="student-23 class-14 class-type-3 weekday-1 actual-content-of-the-cell">
        ...
    </td>
</tr

Thank you for your suggestion, though!

kthorngren

Possibly you could create a search plugin to do what you want. Maybe this example from this thread will help. It looks for a classname in the cell but you could look at the data attributes instead.

Kevin

jp_ptn

That does seem to do just what I wanted! Thank you, I'll give it a try.