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

Question

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

header:

  <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
                });
            }
        }
    }

});

Here is a demo
如果从演示中删除 widget-scroller.js，它将开始工作。
在添加过滤器之前滚动条也能正常工作。

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

Answer 1

看来是tablesorter的版本问题。滚动条小部件需要 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
          });
        }
      }
      */
    }
  });

});

遗憾的是，滚动条小部件正在开发中，不支持过滤器格式化程序设置 - 因此 jQuery UI 日期选择器不支持目前在该演示中工作。

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

Filter stop working when scroller widget is added

tablesorter

filter

scroller