添加滚动器小部件时，过滤器停止工作

yokonanoda 发表于 Dev

横野田

我有一个带有过滤器的表，我使用tablesorter和filter格式化程序。我想向表中添加滚动条，但是当我添加widget-scroller.js时，它停止工作。

标头：

  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://bowercdn.net/c/jquery.tablesorter-2.7.8/css/theme.blue.css">
  <link rel="stylesheet" type="text/css" href="https://bowercdn.net/c/jquery.tablesorter-2.7.8/css/filter.formatter.css">
  <script type='text/javascript' src="https://bowercdn.net/c/jquery.tablesorter-2.7.8/js/jquery.tablesorter.js"></script>
  <script type='text/javascript' src="https://bowercdn.net/c/jquery.tablesorter-2.7.8/js/jquery.tablesorter.widgets.js"></script>
  <script type='text/javascript' src="https://bowercdn.net/c/jquery.tablesorter-2.7.8/js/jquery.tablesorter.widgets-filter-formatter.js"></script>
  <script type='text/javascript' src="https://mottie.github.io/tablesorter/js/widgets/widget-scroller.js"></script>

javascript

$(".tablesorter").tablesorter({
    theme: 'blue',
    widthFixed : true,
    widgets: ['zebra', 'scroller', 'filter'],
    widgetOptions: {
        filter_formatter : {
            1 : function($cell, indx){
                return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
                    from : '12/1/2012', // default from date
                    to   : '2/1/2014',  // default to date
                    changeMonth: true,
                    changeYear : true
                });
            }
        }
    }

});

这是一个演示
如果您从演示中删除了widget-scroller.js，它将开始工作。
在添加过滤器之前，滚动条仍在工作。

谁能告诉我我在做什么错？

莫蒂

看来问题在于表格排序器的版本。滚动器小部件需要tablesorter v2.8 +，但最好使用最新版本（demo，cdn）

$(function(){
  $(".tablesorter").tablesorter({
    theme: 'blue',
    widthFixed : true,
    widgets: ['zebra', 'scroller', 'filter'],
    widgetOptions: {

      // add custom selector elements to the filter row
      /*
      filter_formatter : {

        // Date (two inputs)
        1 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
            from : '12/1/2012', // default from date
            to   : '2/1/2014',  // default to date
            changeMonth: true,
            changeYear : true
          });
        }
      }
      */
    }
  });

});