javascript - 使用 Tablesorter 按列中选定选项的选择进行过滤

Question

我使用 Mottie 的插件 jQuery Tablesorter 很长时间了，它非常有用，但今天我遇到了一个问题。我想通过其中一列中的选择的选定选项来过滤我的表。排序有效，但过滤器无效。

这是 HTML 代码:

<table id="tableau-programmes" cellspacing="0" cellpadding="0" class="donnees tablesorter">
	<thead>
		<tr class="bg-vert-2">
			<th>Programme</th><th>No</th><th>Département</th><th>CP</th><th>Ville</th><th>Agence</th><th>Association</th>
		</tr>
	</thead>
	<tbody>
		<tr id="18">
			<td><a href="programme-neuf-18.php">Bornéo</a></td>
			<td>44</td><td>Loire-Atlantique</td>
			<td>44100</td><td>Nantes</td>
			<td>
				<select class="centre-profit">
					<option value="0">...</option>
					<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
					<option value="1">Agence de Nantes</option>
				</select>
			</td>
			<td><span class="c-vert">Oui</span></td>
		</tr>
		<tr id="17" class="bg-vert-4">
			<td><a href="programme-neuf-17.php">Erdréa</a></td>
			<td>44</td>
			<td>Loire-Atlantique</td>
			<td>44300</td>
			<td>Nantes</td>
			<td>
				<select class="centre-profit">
					<option value="0">...</option>
					<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
					<option value="1">Agence de Nantes</option></select></td>
			<td><span class="c-vert">Oui</span></td>
		</tr>
		...
	</tbody>
</table>   

这是js代码:

$(function(){
	var nom_prog_preselect = (id_prog_preselect > 0) ? $("tr#"+id_prog_preselect).children('td:first').text() : '';
	$.tablesorter.addParser({ 
			id: 'txt_select', 
			is: function(s) { 
					return false;
			}, 
			format: function(s, table, cell) {
				return $(cell).find('select').children('option:selected').text() || s;
			},
			parsed: true,
			type: 'text' 
	});
	$(".tablesorter").tablesorter({
		widgets:['zebra','stickyHeaders','filter']
		,headers: {
			5: { sorter:"txt_select", filter:false }
		}
		,initialized: function (table, filter, apply) {
			$.tablesorter.setFilters( table, [nom_prog_preselect,'','','','','',''], true);
		}
	});
});

请问有谁可以帮助我吗？谢谢。

Answer 1

不要创建自定义“txt_select”解析器，而是加载 parser-input-select.js file提供 fork of tablesorter .

该文件有两个选择解析器:

• 'select' - 存储所选值
• 'select-text' - 存储选定的文本

以及当选择值更改以更新内部缓存时需要的一些额外代码。