2

我正在使用带有 tablesorter 2.0 插件的 jquery ui 选项卡来获得对动态填充的 html 表的排序功能，但排序只发生在页面加载时的第一个选项卡上。其他选项卡不会从 tablesorter 排序或获取斑马条纹。

html:

<div id="tabs">
   <ul>
      <li><a href="ftp-type.aspx?type=ftponly">Ftp Only</a></li>
      <li><a href="ftp-type.aspx?type=Billing Only">Billing Only</a></li>
      <li><a href="ftp-type.aspx?type=Variance">Variance</a></li>
      <li><a href="ftp-type.aspx?type=adjust">Adj Only</a></li>
   </ul>
</div>

我试过了：

$('#tabs').tabs({
      ajaxOptions: {cache: false},
      load: function() 
      {
          $("#ReportTable").tablesorter();
      }
});

任何建议都非常感谢。

4

1 回答 1

4

zebra 小部件仅适用于可见行，因此您需要触发该applyWIdgets方法。我假设您使用的是 jQuery UI 1.10.2 和 jQuery 2.0，您可以在其中使用activate回调（演示）：

$("#tabs").tabs({
    activate: function (event, ui) {
        var $t = ui.newPanel.find('table');
        // make sure there is a table in the tab
        if ($t.length) {
            if ($t[0].config) {
                // update zebra widget
                $t.trigger('applyWidgets');
            } else {
                // initialize tablesorter
                $t.tablesorter({
                    theme: 'blue',
                    widgets: ["zebra"]
                });
            }
        }
    }
});

更新：糟糕，如果表在第一个选项卡中，请使用以下代码（演示）：

var tablesorterOptions = {
    theme: 'blue',
    widgets: ["zebra"]
};

$("#tabs").tabs({
    create: function (event, ui) {
        var $t = ui.panel.find('table');
        if ($t.length) {
            $t.tablesorter(tablesorterOptions);
        }
    },
    activate: function (event, ui) {
        var $t = ui.newPanel.find('table');
        if ($t.length) {
            if ($t[0].config) {
                $t.trigger('applyWidgets');
            } else {
                $t.tablesorter(tablesorterOptions);
            }
        }
    }
});
于 2013-05-21T23:25:05.167 回答