Using jQuery Tablesorter filter-formatter widgets on column using a variable as column index

Question

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

Answer 1

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
    }
});