jquery tablesorter limit length of filter

Question

I am using TableSorter Version 2.28.1. I am using .net with master pages. I have a filter set up on my aspx Gridview control. My customer wants me to limit the length of the filter to just 3 characters. The length of all the values in the column the filter is on is only 3 in length.

Is there a way to limit the length of what the user enters in the filter box?

I tried this ...

widgetOptions: {
group_forceColumn: [0],
group_enforceSort: true,
filter_onlyAvail: {
    1: function (e, n, f, i, $r, c, data) {

        return f.toString().substring(0, 3);
    }
}

}

But it did not seem to do anything. However I did read that I need to put "filter-select" class name to header. How do I do that for a Gridview? Right now to make this work with my Gridview I do the following to get the "Thead" in the table.

        $("#<% =gvContractors.ClientID %> tbody").before("<thead><tr></tr></thead>");
        $("#<% =gvContractors.ClientID %> thead tr").append($("#<% =gvContractors.ClientID %> th"));
        $("#<% =gvContractors.ClientID %> tbody tr:first").remove();

Answer 1

Try this (demo):

$(function() {
  $('#<% =gvContractors.ClientID %>').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    initialized: function(table) {
        $(table).find('.tablesorter-filter').attr('maxlength', '3');
    }
  });
});

And the filter_onlyAvail option can only be set as a string; as the class name to be used to show only available options when a filter-select class is added to the header.

To add a select to the second column (eq() uses a zero-based index), try this code:

$("#<% =gvContractors.ClientID %> thead .tablesorter-filter:eq(1)")