还记得使用 jQuery Cookie 的 jQuery Tablesorter 下拉选择吗？

Question

我正在使用两个 jQuery Tablesorter 下拉菜单来过滤动态生成的表格的结果。选择在下拉下拉的名称时，只有包含该名称的结果将显示。

我想要的是让 jQuery Cookie 在页面重新加载之前记住每个下拉列表中最后选择的过滤器选项。如果在用户离开页面之前名称“Alaina”（见附图）是“分配给”下拉菜单的选定选项，我希望“Alaina”成为用户返回时的默认选项页。

当前页面加载时，会加载默认的“过滤器”选项，因此不会过滤任何结果。

“分配给”列的下拉列表的输出（“Expeditor”列的下拉列表具有相同的结构，只是它的id是msdrpdd20而不是msdrpdd21）：

<td>
  <div id="msdrpdd21_msddHolder" class="ddOutOfVision">
    <select id="msdrpdd21" class="tablesorter-filter" data-column="3" tabindex="-1">
      <option value=""> … </option>
      <option value="(none)"> … </option>
      <option value="Alaina"> … </option>
      <option value="Alyssa"> … </option>
      <option value="Felicita"> … </option>
      <option value="Luciana"> … </option>
      <option value="Rachel"> … </option>
    </select>
  </div>
  <div id="msdrpdd21_msdd" class="dd ddcommon borderRadius" tabindex="0">
    <div class="ddTitle borderRadiusTp">
      <span id="msdrpdd21_title" class="ddTitleText ">
        <span class="ddlabel">
          (none)
        </span>
        <span class="description" style="display: none;"></span>
      </span>
    </div>
    <input id="msdrpdd21_titleText" class="text shadow borderRadius" type="text" autocomplete="off" style="display: none;"></input>
    <div id="msdrpdd21_child" class="ddChild ddchild_ border shadow" style="display: none;">
      <ul>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_ selected"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
      </ul>
    </div>
  </div>
</td>

编辑 (07/29/13)：Nev 的 cookie 截图：

编辑 (08/01/13)：Nev 修订的屏幕截图：

过滤结果（通过Tablesorter Filter）：

$( '#todo-list' ).tablesorter( {
    widgets: ["filter"],
    widgetOptions : {filter_reset : '.reset'}
} );

Answer 1

Nev 的回答是让我走到这一步的原因，如果没有他的帮助，我不会（愚蠢地）弄清楚这一点。

tablesorter 使用以下函数调用：

$('table').tablesorter( {
    widgets: ["filter"],
    widgetOptions : {filter_reset : '.reset'}
}); 

为了保存您上次选择的过滤器，必须将以下代码放置在 上述调用之前：

$('table')
    .bind('filterInit', function () {
        // check that storage utility is loaded
        if ($.tablesorter.storage) {
            // get saved filters
            var f = $.tablesorter.storage( this, 'tablesorter-filters' ) || [];
            $.tablesorter.setFilters( this, f, true );
        }
    })
    .bind('filterEnd', function () {
        if ($.tablesorter.storage) {
            // save current filters
            var f = $.tablesorter.getFilters( this );
            $.tablesorter.storage( this, 'tablesorter-filters', f );
        }
    });

Answer 2

使用JQuery Cookie:

$(document).ready(function (e) {
    data = $("#payments").msDropdown().data('dd');
    if ($.cookie("table-sorter") !== null) {
        var toselect = $.cookie("table-sorter");
        data.set('selectedIndex', toselect);
    }

    $('#payments').change(function () {
        var selected = this.selectedIndex;
        // save value to cookie
        $.cookie("table-sorter", selected, { path: '/' });
    });


});

这里是Fiddle（适用于 Firefox，但不适用于 IE）。但是，如果您将代码上传到自己的服务器（在 IE 中测试），则该代码可以工作。