Reputation: 1232
TableSorter List Sorting and Filtering
Using TableSorter Fork version 2.22.5, I am trying to get a rather compressed table to filter and sort. The table is compressed to save horizontal space, and because the values within each cell are logically grouped. It is based on a form which takes mostly checkbox inputs, and thus results in a list of binary values. Consider the following snippet:
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
<th>Days</th>
<th>Times on weekdays</th>
<th>Times on weekends</th>
<th>Types</th>
<th>Category</th>
<th>Equipment</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
<a class="toggle" href="#">Tom</a>
</td>
<td>UTC+2</td>
<td>Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday<br>
Saturday<br>
Sunday</td>
<td>Morning<br>
Afternoon<br>
Evening<br>
Night</td>
<td>Morning<br>
Afternoon<br>
Evening<br>
Night</td>
<td>One<br>
Two<br>
Three<br>
Four<br>
Five</td>
<td>A<br>
B<br>
C<br>
D<br>
E<br>
F</td>
<td>Spoon<br>
Knife<br>
Forks</td>
</tr>
<tr class="tablesorter-childRow row_notes">
<td colspan="8"><strong>Details</strong>: Further details.</td>
</tr>
<tr>
<td rowspan="2">
<a class="toggle" href="#">Bill</a>
</td>
<td>UTC+2</td>
<td>Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday<br>
Saturday<br>
Sunday</td>
<td>Morning<br>
Afternoon<br>
Evening<br>
Night</td>
<td>Morning<br>
Afternoon<br>
Evening<br>
Night</td>
<td>One<br>
Two<br>
Three<br>
Four<br>
Five</td>
<td>A<br>
B<br>
C<br>
D<br>
E<br>
F</td>
<td>Spoon<br>
Knife<br>
Forks</td>
</tr>
<tr class="tablesorter-childRow row_notes">
<td colspan="8"><strong>Details</strong>: Further details.</td>
</tr>
<tr>
<td rowspan="2">
<a class="toggle" href="#">Mary</a>
</td>
<td>UTC+2</td>
<td>Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday<br>
Saturday<br>
Sunday</td>
<td>Morning<br>
Afternoon<br>
Evening<br>
Night</td>
<td>Morning<br>
Afternoon<br>
Evening<br>
Night</td>
<td>One<br>
Two<br>
Three<br>
Four<br>
Five</td>
<td>A<br>
B<br>
C<br>
D<br>
E<br>
F</td>
<td>Spoon<br>
Knife<br>
Forks</td>
</tr>
<tr class="tablesorter-childRow row_notes">
<td colspan="8"><strong>Details</strong>: Further details.</td>
</tr>
</tbody>
</table>Currently I have each option separated by a line-break within the cell, as this best represents how the table should render. The idea is to be able to filter for each of the unique values within each cell, such as select all matches for day, time of day, etc. Note also the inclusion of child-rows, which will show additional information..
How do I format the table to allow TableSorter to both sort and filter on these lists of values within each row?
Upvotes: 0
Views: 216
Answers (1)
Reputation: 1232
The answer to this turned out to be, as suggested in comments, to slightly altar the organization of the data within cells. When rendered as an unordered list filtering works as expected. Further, a parser can easily be applied to the list items if needed. As it turns out, what I sought was the filtering, not the extra level of sorting.
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
<th>Days</th>
<th>Times on weekdays</th>
<th>Times on weekends</th>
<th>Types</th>
<th>Category</th>
<th>Equipment</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
<a class="toggle" href="#">Tom</a>
</td>
<td>UTC+2</td>
<td><ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li
</ul></td>
<td><ul>
<li>Morning</li>
<li>Afternoon</li>
<li>Evening</li>
<li>Night</li
</ul></td>
<td><ul>
<li>Morning</li>
<li>Afternoon</li>
<li>Evening</li>
<li>Night</li
</ul></td>
<td><ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li
</ul></td>
<td><ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li
</ul></td>
<td><ul>
<li>Spoon</li>
<li>Knife</li>
<li>Forks</li
</ul></td>
</tr>
<tr class="tablesorter-childRow row_notes">
<td colspan="8"><strong>Details</strong>: Further details.</td>
</tr>
<tr>
<td rowspan="2">
<a class="toggle" href="#">Bill</a>
</td>
<td>UTC+2</td>
<td><ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li
</ul></td>
<td><ul>
<li>Morning</li>
<li>Afternoon</li>
<li>Evening</li>
<li>Night</li
</ul></td>
<td><ul>
<li>Morning</li>
<li>Afternoon</li>
<li>Evening</li>
<li>Night</li
</ul></td>
<td><ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li
</ul></td>
<td><ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li
</ul></td>
<td><ul>
<li>Spoon</li>
<li>Knife</li>
<li>Forks</li
</ul></td>
</tr>
<tr class="tablesorter-childRow row_notes">
<td colspan="8"><strong>Details</strong>: Further details.</td>
</tr>
<tr>
<td rowspan="2">
<a class="toggle" href="#">Mary</a>
</td>
<td>UTC+2</td>
<td><ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li
</ul></td>
<td><ul>
<li>Morning</li>
<li>Afternoon</li>
<li>Evening</li>
<li>Night</li
</ul></td>
<td><ul>
<li>Morning</li>
<li>Afternoon</li>
<li>Evening</li>
<li>Night</li
</ul></td>
<td><ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li
</ul></td>
<td><ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li
</ul></td>
<td><ul>
<li>Spoon</li>
<li>Knife</li>
<li>Forks</li
</ul></td>
</tr>
<tr class="tablesorter-childRow row_notes">
<td colspan="8"><strong>Details</strong>: Further details.</td>
</tr>
</tbody>
</table>Upvotes: 1
Related Questions
- jQuery Tablesorter - Disable Sort AND Filter
- Change TableSorter sorting criteria
- tablesorter-filter and jquery tablesorter
- jQuery Tablesorter sort
- jQuery Tablesorter and sortList
- Tablesorter filter
- jQuery tablesorter
- jQuery TableSorter not sorting correctly and I don't know how
- tablesorter (jQuery) - How to create a custom sorter for my needs here
- jQuery tablesorter sort only certain rows/columns