javascript - JQuery Tablesorter Add Column with Filters -

javascript - JQuery Tablesorter Add Column with Filters -

i using jquery tablesorter 2.7.* javascript table have. using tablesorter filter widget, in order have several of columns have drop-down filtering options. have new challenge: required add together columns table dynamically. have seen question: adding columns dynamically table managed jquery's tablesorter - recommends remove , recreate table each addition/removal of column. fair enough, causes conflict filter widget.

in order apply filter functions, javascript references column index only, so:

widgetoptions: { filter_reset: '.reset', filter_functions: { 2: true, 3: true, } }

this code cause columns index 2 , 3 have default select filter. problem occurs when new columns added dynamically - index values of these columns change.

this brings question; there way apply widget options columns named name? if not, there solution can implement accomplish functionality can add/remove columns dynamically, without disturbing filter functions?

edit: using filter functions.

update #2: of tablesorter v2.17.0 class name* or id can used target column within filter_functions option:

// filter functions widgetoptions: { filter_functions : { ".exact" : function(e, n, f, i) { homecoming e === f; } } }

* note: class name can not include selector uses kind of indexing, e.g. "th:eq()", ":gt()", ":lt()", ":first", ":last", ":even" or ":odd", ":first-child", ":last-child", ":nth-child()", ":nth-last-child()", etc.

in docs, shows alternative using filter_functions option:

alternately, instead of setting column filter function true, give column header class name of "filter-select". see demo.

so, add together filter-select class name column instead.

update: since other filter functions beingness used, can define these functions outside of initialization code (demo)

// add together these options select dropdown (date example) // note normalized (n) value contain // date numerical value (.gettime()) var datefxns = { // add together these options select dropdown (date example) // note normalized (n) value contain // date numerical value (.gettime()) "< 2004": function (e, n, f, i) { homecoming n < date.utc(2004, 0, 1); // < jan 1 2004 }, "2004-2006": function (e, n, f, i) { homecoming n >= date.utc(2004, 0, 1) && // jan 1 2004 n < date.utc(2007, 0, 1); // jan 1 2007 }, "2006-2008": function (e, n, f, i) { homecoming n >= date.utc(2006, 0, 1) && // jan 1 2006 n < date.utc(2009, 0, 1); // jam 1 2009 }, "2008-2010": function (e, n, f, i) { homecoming n >= date.utc(2008, 0, 1) && // jan 1 2006 n < date.utc(2011, 0, 1); // jam 1 2009 }, "> 2010": function (e, n, f, i) { homecoming n >= date.utc(2010, 0, 1); // jan 1 2010 } }, currentdatecolumn = 3, filterfxn = {}; filterfxn[currentdatecolumn] = datefxns; $('table').tablesorter({ widgets: ['zebra', 'filter'], widgetoptions: { filter_functions: filterfxn } });

javascript jquery tablesorter