jquery-ui - 带有 Tablesorter 的 jqueryui 选项卡

Question

我使用jquery ui选项卡和tablesorter 2.0插件来获得动态填充的html表的排序能力，但排序仅发生在页面加载时的第一个选项卡上。其他选项卡不会对表格排序器进行排序或获取斑马条纹。

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

非常感谢任何建议。

Answer 1

斑马小部件仅适用于可见行，因此您需要触发 applyWIdgets 方法。我假设您使用的是 jQuery UI 1.10.2 和 jQuery 2.0，您可以在其中使用 activate 回调 ( demo ):

$("#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"]
                });
            }
        }
    }
});

更新:哎呀，如果该表位于第一个选项卡中，请使用此代码 ( demo ):

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