Table Sorter 2.0手动重置表

时间:2014-02-13 21:45:24

标签: jquery filter tablesorter

参考表分类2.0: http://mottie.github.io/tablesorter/docs/index.html

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

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

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

使用表格分类器的表具有id(#modelSearchTable)
我创建的文本框有class('modx')

有谁知道我怎么能有一个按钮:

(1)将所有文本框(类'modx')设置为值'' (2)重置表格排序器中的过滤器(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();

});

1 个答案:

答案 0 :(得分:3)

您可以绑定到相同的重置按钮,以便清除表格过滤器和特定文本区域:

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

});