在页面加载时清除/应用 tablesorter 过滤答案

【问题标题】：clear/reapply tablesorter filtering on pageload在页面加载时清除/应用 tablesorter 过滤
【发布时间】：2016-03-21 18:41:18
【问题描述】：

我不擅长 javascript，有时我可以复制 JQuery 代码并使其工作。请耐心等待我。

我使用的是几天前最新版本的 tablesorter。

我有一个带有表格和复选框的页面。选中该复选框后，我将过滤器应用于第 7 行，即下拉框的值。效果很好。

当我发布页面时，过滤器丢失，但复选框选中状态保持不变，这是不同步的。所以我调用了读取复选框状态并再次设置过滤器的函数，但它不起作用。似乎该表未初始化，因此实际上并未应用过滤器。我已经在 CodeBehind 和 window.onload 函数中尝试了 _LoadComplete。都不工作。

所以我尝试了 filterinit 和 filterend 函数，以及一个简单的 filter_saveFilters : true。这完美地维护了过滤，但是当我转到另一个页面并返回时，过滤器被维护并且复选框处于未选中状态。又不同步了。

我发现有两种方法可用于重置已保存的过滤器。 $('table').trigger('filterReset'); $('table').trigger('filterResetSaved');我似乎无法让他们工作。

所有问题都发生在页面加载时。简单地说，如果复选框被选中，应用过滤器并保留它，直到复选框被更改或页面被加载而不回发。

读取复选框和下拉框并设置过滤器和tablesorter初始化的过滤器函数。

function filterTS() {
    if (document.getElementById("slideTwo").checked == true) {
        var e = document.getElementById("selUsers");
        var selectedText = e.options[e.selectedIndex].text;
        var filters = $('table').find('input.tablesorter-filter'),  col = 7, txt = selectedText, cur = filters.eq(col).val(), mult, i;
        }
        else {
            var filters = $('table').find('input.tablesorter-filter'), col = 7, txt = '', cur = filters.eq(col).val(), mult, i;
        }
        if (cur && txt !== "") {
            mult = cur.split('|');
            i = $.inArray(txt, mult);
            if (i < 0) {
                mult.push(txt);
            } else {
                mult.splice(i, 1);
            }
            txt = mult.join('|');
        }
        filters.eq(col).val(txt).trigger('search', false);
    }
    //Tablesorter Initialization
    $(window).ready(function () {
        $("#GridView1").tablesorter({
            theme: 'green',
            sortList: [[0, 1]],
            headerTemplate: '{content}{icon}',
            dateFormat: 'mmddyyyy',
            sortMultiSortKey: 'shiftKey',
            sortResetKey: 'ctrlKey',
            usNumberFormat: true,
            widgets: ['zebra', 'filter'],
            widgetOptions: {
                filter_ignoreCase: true,
            }
        });
        $('table')
            .bind('filterInit', function () {
                // check that storage ulility is loaded
                if ($.tablesorter.storage) {
                    // get saved filters
                    var f = $.tablesorter.storage(this, 'tablesorter-filters') || [];
                    $(this).trigger('search', [f]);
                }
            })
            .bind('filterEnd', function () {
                if ($.tablesorter.storage) {
                    // save current filters
                    var f = $(this).find('.tablesorter-filter').map(function () {
                    return $(this).val() || '';
                    }).get();
                    $.tablesorter.storage(this, 'tablesorter-filters', f);
                }
            });
        $("#slideTwo").on("click", filterTS);
        $("#slideOne").on("click", hidedates);

我做错了什么？为什么我不能在页面加载时从代码中设置过滤器？我到底该放哪里：

$('table').trigger('filterReset');
$('table').trigger('filterResetSaved');

我需要将“表格”更改为“#Gridview1”吗？似乎没有任何效果。

【问题讨论】：

标签： javascript jquery filter tablesorter reset

【解决方案1】：

试试这个：

$(document).ready(function(){
  $('table').trigger('update');
});

或者这个：

$(document).ready(function(){
  $('table').trigger('updateAll', [resort]);
});

【讨论】：

是的，这不起作用。我有两种不同的场景，一种没有过滤器保存，但尝试通过 fiterTS() 在加载时设置，另一种使用过滤器保存，如果未选中复选框，我试图在页面加载时清除它。我尝试了许多变体，但它根本没有产生任何结果。

【解决方案2】：

首先，为“filterInit”和“filterEnd”设置的代码与将filter_saveFilters option 设置为true 基本相同。

使用$('table').trigger('filterResetSaved');是清除存储的过滤器值所需的方法；但同样，它仅在 filter_saveFilters 选项为 true 时才有效。

对于复选框，您可以设置复选框属性autocomplete="off"（ref）在页面刷新时清除状态；但是现在将filter_saveFilters 选项设置为true，通过检查#slideTwo 设置的任何过滤器都将在页面刷新时设置，因为过滤器值已保存.. 也许该过滤器的值可以在表格排序器初始化时检查，并且如果它与#slideTwo 的值匹配，您可以设置复选框状态吗？

如果您需要有关该代码的帮助，提供演示或示例会更容易。我设置了this demo给你修改。

$(function() {
  $("#GridView1").tablesorter({
    theme: 'green',
    sortList: [[0, 1]],
    headerTemplate: '{content}{icon}',
    // dateFormat: 'mmddyyyy',
    // sortMultiSortKey: 'shiftKey',
    // sortResetKey: 'ctrlKey',
    // usNumberFormat: true,
    widgets: ['zebra', 'filter'],
    widgetOptions: {
      // filter_ignoreCase: true,
      filter_saveFilters: true
    },
    initialize: function(table) {
      var c = table.config,
        $s2 = $('#slideTwo'),
        // c.$filters points to the TD, not the input
        $filter = c.$filters.eq(3).find('.tablesorter-filter'),
        val = $filter.val();
      $s2.prop('checked', val === 'something');
    }
  });
});

* 注意：被注释掉的选项已经设置为默认值。

【讨论】：

请注意，我的 JQuery 很弱。我认为您在此处拥有的初始化函数执行以下操作：（1）获取我们要修改的表配置（2）找到第三个拖曳的过滤器（3）获取该过滤器的值并将其放入 val (4) 如果 val = 'something' 则设置检查。对吗？
有几点让我抓狂：(1) 删除已保存过滤器的代码在哪里（当 filter_saveFilters = true 时）清除它们并让 tablesorter 初始化而不进行过滤？我似乎无法让它工作。无论我把这些代码行放在哪里，表格都会被过滤。
(2) 有没有办法使用上面的filterTS()函数来设置页面加载时的过滤器？似乎我无法在页面加载时使用该功能来设置过滤器。他们永远不会被应用。如果我不保存过滤器，但可以使用javascript函数设置过滤器，我会很高兴。
(3) jfiddle 有没有办法模拟回发？在页面加载过程中，我无法修改过滤器设置。
您的理解基本正确....eq(3) 实际上针对第四列 - 它是从零开始的索引（即从零开始计数）。 (1) 如果您查看 filter_saveFilter 设置的文档，您会看到以下代码：$.tablesorter.storage( $('table'), 'tablesorter-filters', '' ); 在初始化 tablesorter 之前添加它以清除过滤器。 (2) TS() 函数将在页面加载时起作用，因为它只设置过滤器，而不是复选框。 (3) 我不认为 JSFiddle 可以做回发。

【解决方案3】：

因此，如果复选框在页面加载完成后面的代码中被选中，我将数据值添加到表的标题中，从而使整个操作变得更容易......

If Me.slideTwo.Checked=True Then GridView1.HeaderRow.Cells(10).Attributes.Add("data-value",selUsers.SelectedItem.Text)

而且 presto changeo 它奏效了。我仍然不知道为什么在表格排序器初始化完成后调用 javascript 函数实际上不起作用。它将文本设置到过滤器字段中，但不应用它。但是，一旦页面加载，javascript 就可以很好地工作。

【讨论】：