TableSorter 是一个非常流行的 jQuery 插件，用于对 HTML 表格进行排序。而 `tablesorterFilter` 是一个增强版的插件，由 Christian Bach 原始的 TableSorter 插件基础上发展而来，它添加了搜索和过滤功能，使用户能够更方便地在大型数据表中查找特定信息。
### TableSorter 插件核心功能
1. **动态排序**：TableSorter 允许用户点击表格的列头进行升序或降序排序。
2. **兼容性**：它兼容各种浏览器，包括较旧的版本，确保广泛的用户覆盖。
3. **自定义排序**：开发者可以定义自定义排序规则，处理非标准的数据类型。
4. **动画效果**：在排序时，TableSorter 可以添加平滑的动画效果，提升用户体验。
5. **多列排序**：支持多列同时排序，满足复杂的数据筛选需求。
### tablesorterFilter 扩展功能
1. **实时搜索**：此插件添加了在表格内搜索的功能，用户可以在输入框中输入关键词，实时过滤表格内容。
2. **多列过滤**：每个列都可以设置过滤条件，用户可针对不同列进行筛选，提高数据查找效率。
3. **高级过滤器**：支持多种类型的过滤器，如选择器、输入框、复选框等，满足不同类型的过滤需求。
4. **自定义过滤逻辑**：开发者可以定义自己的过滤函数，实现个性化的过滤规则。
5. **过滤提示**：提供过滤提示，帮助用户了解如何使用过滤器。
### 使用步骤
1. **引入依赖**：首先需要引入 jQuery 和原始的 TableSorter 脚本，以及 tablesorterFilter 脚本。
2. **初始化表格**：在页面加载完成后，调用 `$("table").tablesorter()` 初始化表格。
3. **启用过滤器**：通过设置配置项 `filter` 为 `true` 或者使用 `$("table").tablesorter({ widgets: ['filter'] })` 启用过滤器。
4. **添加搜索框**：在表格上方添加输入框，通过事件监听实现搜索功能。
5. **自定义行为**：根据项目需求，可以使用 TableSorter 和 tablesorterFilter 提供的 API 进行自定义扩展。
### 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.filter.min.js"></script>
</head>
<body>
<input type="search" id="searchInput">
<table class="tablesorter">
<!-- 表格内容 -->
</table>
<script>
$(function() {
$("table").tablesorter({
widgets: ['filter']
});
$("#searchInput").on("keyup", function() {
$("table").trigger("search", [$(this).val()]);
});
});
</script>
</body>
</html>
```
### 总结
`tablesorterFilter` 插件极大地增强了 jQuery TableSorter 的功能，提供了丰富的搜索和过滤选项。结合其易于定制的特点，它成为处理大量数据展示和交互的理想工具。无论是简单的数据过滤还是复杂的搜索逻辑，这个插件都能轻松应对，为前端开发人员带来极大的便利。
jquery-tablesorter-filter-master.zip （4个子文件） 
jquery-tablesorter-filter-master 
tablesorter_filter.js 10KB
