0

我 100% 确定如何让下拉过滤器工作。我已经复制了文档中的示例，并尝试将我搜索过的一些东西放在一起，但由于某种原因，下拉菜单从未出现过。我尝试使用文档中的示例，但Uncaught TypeError: Cannot read property 'parsers' of undefined在 widgets.js 中不断出现错误

我没有链接任何 CSS（所以没有主题），因为我只是想看看它是如何工作的。这是现场直播

我的代码- 与文档示例非常相似。

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

我一定错过了一个核心部分，但我不确定是什么。

4

1 回答 1

1

我看到的问题是上面共享的示例页面使用的是原始版本 Tablesorter 2.0.5，而过滤器小部件是为更新版本的 tablesorter 编写的（请参阅此演示页面上的第三个要点）。

所以你需要做的就是从这个fork下载最新版本的 tablesorter。

于 2013-09-04T00:02:23.227 回答