Table Sorter 2.0 manually reset tables

Question

Reference Table Sorter 2.0: http://mottie.github.io/tablesorter/docs/index.html

I am not using the built-in filters for Table Sorter 2.0. I actually have to use alternate textboxes to sort. Right now, they are working great. But the problem is that I need a reset button to:

• Reset the values of the textboxes
• Reset the filter (to show all data)

Table Sorter simply tells us to add the class 'reset' to the button - and that will reset the filters. The problem is that I cannot set all of my textbox values to null.

The table that uses Table Sorter has id (#modelSearchTable)
The textboxes that I created have class ('modx')

Does anyone know how I can have one button to:

(1) Set all textboxes (with class 'modx') to a value of ''
(2) Reset the filters from Table Sorter (id = 'modelSearchTable')

.

$(".tablesorter").tablesorter({
theme: 'blue',
widthFixed : false,
widgets: ["zebra", "filter", "scroller"],
widgetOptions : {
  filter_childRows : false,
  filter_columnFilters : true,
  filter_cssFilter : '',
  filter_filteredRow   : 'filtered',
  filter_formatter : null,
  filter_functions : null,
  filter_hideFilters : true,
  filter_ignoreCase : true,
  filter_liveSearch : true,
  filter_reset : 'button.reset',
  filter_saveFilters : true,
  filter_searchDelay : 300,
  filter_serversideFiltering: false,
  filter_startsWith : false,
  filter_useParsedData : false
  }
 });

$(function(){
$("#modelSearchTable").tablesorter({ sortList: [[1,0], [0,0]] });
});

var i, id, myval, x, x2, x3, x4,itemval;
var arrval = new Array();
var arrpos = new Array();


//This function uses the values of my textboxes (not the built-in filters) to sort the table
$('.modx').keyup(function() {
    var len = this.value.length;
    x = parseInt($(this).attr('data-length'));
    var a = x - 1;
     if (len > a) {
       this.value = this.value.substring(0,x);
       this.value = this.value.toUpperCase();
       var ntabindex = parseFloat($(this).attr('tabindex'));
       ntabindex++;
       $('input[tabindex='+ntabindex+']').focus();
     } else {}
        this.value = this.value.toUpperCase();

    arrval = [];
    arrpos = [];
   $(this).attr('data-log', '1');
    $('.modx').each(function() {
        if ($(this).attr('data-log') == 1) {
            arrval.push($(this).val());
            arrpos.push($(this).attr('data-val'));
        } else {}
    });

    $('#modelSearchTable tbody tr').hide().filter(function () {
        var tValue = $(this).find('td:nth-child(2)').text();
        for (var i = 0, l = arrpos.length; i < l; i++) {
            if (tValue.substr(arrpos[i], arrval[i].length) !== arrval[i]) {
                return false;
            }
             }
        return true;
    }).show();

});

Answer 1

You can bind to the same reset button so that it clears both the table filters and your specific textareas:

$(function(){

    $(".tablesorter").tablesorter({
        theme: 'blue',
        widthFixed : false,
        widgets: ["zebra", "filter", "scroller"],
        widgetOptions : {
            filter_reset : 'button.reset'
        }
    });

    $('button.reset').on('click', function(){
        // clear textareas
        $('.modx').val('').trigger('keyup');
    });

});