【发布时间】：2013-09-04 08:02:23
【问题描述】：
我 100% 确定如何让下拉过滤器工作。我已经复制了example in the docs 并尝试将一些我搜索过的东西放在一起，但由于某种原因，下拉菜单从未出现。我尝试使用文档中的示例，但在 widgets.js 中不断收到错误 Uncaught TypeError: Cannot read property 'parsers' of undefined
我没有链接任何 CSS（所以没有主题），因为我只是想看看它是如何工作的。这是Live Site
我的代码 - 与文档示例非常相似。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.widgets.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table").tablesorter({
widthFixed : true,
widgets: ["filter"],
widgetOptions : {
filter_childRows : false,
filter_hideFilters : false,
filter_ignoreCase : true,
filter_functions : {
1 : function(e, n, f, i) {
return e === f;
}
}
}
});
});
</script>
</head>
<body>
<table class="tablesorter">
<thead>
<tr>
<th class="filter-select" data-placeholder="Select a name">First Name</th>
<th data-placeholder="Exact matches only">Last Name</th>
<th data-placeholder="Choose a city">City</th>
<th data-value="<30">Age</th>
<th data-placeholder="Select a filter">Total</th>
<th class="filter-select filter-onlyAvail">Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>Johnson Sr</td>
<td>Atlanta</td>
<td>35</td>
<td>$5.95</td>
<td>22%</td>
<td>Jun 26, 2004 7:22 AM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Johnson</td>
<td>Yuma</td>
<td>12</td>
<td>$2.99</td>
<td>5%</td>
<td>Aug 21, 2009 12:21 PM</td>
</tr>
<tr>
<td>Clark</td>
<td>Henry Jr</td>
<td>Tampa</td>
<td>51</td>
<td>$42.29</td>
<td>18%</td>
<td>Oct 13, 2000 1:15 PM</td>
</tr>
<tr>
<td>Denni</td>
<td>Henry</td>
<td>New York</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>Boston</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent Sr</td>
<td>Los Angeles</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Peter</td>
<td>Kent Esq</td>
<td>Seattle</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2021 9:12 AM</td>
</tr>
<tr>
<td>Peter</td>
<td>Johns</td>
<td>Milwaukee</td>
<td>13</td>
<td>$5.29</td>
<td>4%</td>
<td>Jan 8, 2012 5:11 PM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Evan</td>
<td>Chicago</td>
<td>24</td>
<td>$14.19</td>
<td>14%</td>
<td>Jan 14, 2004 11:23 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>Upland</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>McMasters</td>
<td>Pheonix</td>
<td>18</td>
<td>$55.20</td>
<td>15%</td>
<td>Feb 12, 2010 7:23 PM</td>
</tr>
<tr>
<td>Dennis</td>
<td>Masters</td>
<td>Indianapolis</td>
<td>65</td>
<td>$123.00</td>
<td>32%</td>
<td>Jan 20, 2001 1:12 PM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>Fort Worth</td>
<td>25</td>
<td>$22.09</td>
<td>17%</td>
<td>Jun 11, 2011 10:55 AM</td>
</tr>
</tbody>
</table>
</body>
</html>
我一定错过了一个核心部分，但我不确定是什么。
【问题讨论】：
-
$("table")指的是哪个元素？因为您的代码中没有表格元素。 -
("$table")将选择我的 html 中的所有表，我确实有 1 个。 -
你能分享这个页面的链接吗？ （我想查看控制台的日志）
-
我刚刚将它添加到我的主要问题中。
标签： javascript jquery filtering tablesorter