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?
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.