Question

使用TableSorter Fork版本2.22.5，我试图获得一个相当压缩的表来过滤和排序。该表被压缩以节省水平空间，并且因为每个单元内的值在逻辑上被分组。它基于一个主要占用复选框输入的表单，从而生成二进制值列表。请考虑以下代码段：

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

目前，我将每个选项在单元格中以换行符分隔，因为这最好地表示表格应该如何呈现。我们的想法是能够过滤每个单元格中的每个唯一值，例如选择一天中的所有匹配，一天中的时间等。还要注意包含子行，这将显示其他信息..

如何格式化表格以允许TableSorter对每行中的这些值列表进行排序和过滤？

Answer 1

正如评论中所建议的那样，答案就是在细胞内轻微地组织数据。 当呈现为无序列表时，过滤按预期工作。此外，如果需要，可以轻松地将解析器应用于列表项。事实证明，我所寻求的是过滤，而不是额外的分类。

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

TableSorter列表排序和过滤

1 个答案: