filtertablesorterscroller

Filter stop working when scroller widget is added


I have a table with filters which I use tablesorter and filter formatter. I want to add a scroll bar to the table but when I add the widget-scroller.js, it stops working.

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
If you remove the widget-scroller.js from the demo, it will start working.
The scroll bar was working before the filter was added too.

Can anyone tell me what I'm doing wrong?


Solution

  • It looks like the problem is the version of tablesorter. The scroller widget requires tablesorter v2.8+, but it's always better to use the most recent version (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
              });
            }
          }
          */
        }
      });
    
    });
    

    Sadly, the scroller widget is a work-in-progress and does not support filter formatter settings - so the jQuery UI datepicker does not currently work in that demo.