Filter stop working when scroller widget is added

Question

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?

score 0 · Accepted Answer · answered Dec 12 '15 at 02:03

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.

Thanks Mottie. I read that the scroller widget doesn't work perfectly with the datepicker somewhere else too ... — yokonanoda, Dec 14 '15 at 15:53
I tried this with the latest versions but the filter stopped working. That's why I'm using the versions on the tablesorter demo page. — yokonanoda, Dec 15 '15 at 15:56

Filter stop working when scroller widget is added

1 Answers1