Question

我有一个带过滤器的表，我使用tablesorter和filter formatter。我想在表格中添加一个滚动条，但是当我添加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
                });
            }
        }
    }

});

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 datepicker当前不能在该演示中使用。

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

1 个答案: