jquery - Table Sorter 2.0 手动重置表格

Question

引用表排序器 2.0: http://mottie.github.io/tablesorter/docs/index.html

我没有使用 Table Sorter 2.0 的内置过滤器。我实际上必须使用备用文本框进行排序。现在，他们工作得很好。但问题是我需要一个重置按钮来:

• 重置文本框的值
• 重置过滤器(以显示所有数据)

表格排序器只是告诉我们将“重置”类添加到按钮 - 这将重置过滤器。问题是我无法将所有文本框值设置为 null。

使用表排序器的表有 id (#modelSearchTable)
我创建的文本框有类('modx')

有谁知道我如何可以通过一个按钮来:

(1) 将所有文本框(具有“modx”类)的值设置为“”
(2) 从 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

您可以绑定(bind)到同一个重置按钮，以便它清除表格过滤器和您的特定文本区域:

$(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');
    });

});