I am trying to use the filter_formatter from Tablesorter's widgetOptions to apply a two field uiDatepicker to any column header that contains 'Date' in the title. All of the other columns in the table have regular filters. I can get this all working fine when I specify the col index using the zero base (0= 1st column). I thought it would be a simple process it find the column index of the headers containing 'Date' and pass this as a variable to the filter_formatter, but the column index doesn't seem to accept variables.
I hope I've explained this clearly enough. Can anyone assist.
dateColumn = $('th:contains("Date")').index();
$('table').tablesorter({
widgets: ["zebra", "filter", "uitheme"],
widgetOptions : {
filter_columnFilters : true,
filter_startsWith : true,
filter_searchDelay : 300,
filter_reset : '.reset',
filter_formatter : {
dateColumn : function ($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
textFrom: 'from', // "from" label text
textTo: 'to', // "to" label text
dateFormat: 'dd/mm/yy' ,
changeMonth: true,
changeYear : true
});
}
}
}
});
This is what I thought would make it work. It works when 'dateColumn' is replaced with '1'(or another number) To get this working would be great. Ultimately I think I'll need a 'each' loop included for multiple date columns in the same table. Thanks
Sadly the filter_formatter
function doesn't work that way. For now, you'll have to set up the filter_formatter
before table initialization. I do plan to allow referencing a column by class or id (see issue #237), but I haven't worked out the code yet.
var filterFormatter = {};
$('table thead .date').each(function(){
var column = $(this).index(); // assuming no colspans in the row
filterFormatter[column] = function ($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
textFrom: 'from', // "from" label text
textTo: 'to', // "to" label text
dateFormat: 'dd/mm/yy' ,
changeMonth: true,
changeYear : true
});
}
});
$('table').tablesorter({
widgets: ["zebra", "filter", "uitheme"],
widgetOptions : {
filter_columnFilters : true,
filter_startsWith : true,
filter_searchDelay : 300,
filter_reset : '.reset',
filter_formatter : filterFormatter
}
});