Question

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

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

Answer 1

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

所以您只需从此this demo page下载latest version of tablesorter即可。

Tablesorter过滤器澄清

1 个答案: