Question

我正在使用带有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();
      }
});

非常感谢任何建议。

Answer 1

zebra小部件仅适用于可见行，因此您需要触发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);
            }
        }
    }
});

jqueryui使用Tablesorter进行选项卡

1 个答案: