Filtering rows based on their element's attributes

Filtering rows based on their element's attributes

jp_ptnjp_ptn Posts: 3Questions: 0Answers: 0
edited August 2021 in Free community support

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?

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited August 2021

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

    Kevin

  • jp_ptnjp_ptn Posts: 3Questions: 0Answers: 0

    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!

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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_ptnjp_ptn Posts: 3Questions: 0Answers: 0

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

Sign In or Register to comment.