3

我正在使用两个 jQuery Tablesorter 下拉列表来过滤动态生成的表的结果。When a name in either drop-down is selected, only results containing that name will show.

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

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

“分配给”列的下拉列表的输出（“Expeditor”列的下拉列表具有相同的结构，只是它的idismsdrpdd20而不是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>

在此处输入图像描述

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

在此处输入图像描述

编辑（08/01/13）：Nev 修订的屏幕截图：

在此处输入图像描述

过滤结果（通过Tablesorter Filter）：

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

2 回答 2

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

于 2013-07-29T11:35:06.500 回答
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 );
        }
    });
于 2013-08-01T18:37:13.523 回答