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

Question

我正在使用两个jQuery Tablesorter下拉列表来过滤动态生成的表的结果。选择下拉列表中的名称时，仅显示包含该名称的结果。

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

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

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

msdrpdd21

编辑（2013年7月29日）：Nev的cookie屏幕截图：

编辑（2013年1月8日）：Nev的修订截图：

过滤结果（通过Tablesorter Filter）：

<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>

Answer 1

使用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中测试），则该代码可以正常工作。

Answer 2

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 );
        }
    });