Tablesorter的jqueryui选项卡 [英] jqueryui Tabs with Tablesorter

问题描述

我正在将jquery ui选项卡与tablesorter 2.0插件一起使用，以在动态填充的html表上获得排序功能，但排序仅在页面加载时在第一个选项卡上进行.其他选项卡不对表格排序器进行排序或获取斑马条纹.

I'm using jquery ui tabs with the tablesorter 2.0 plugin to obtain sort abilities on a dynamically populated html table but the sort only happens on the first tab upon page load. The other tabs do not sort or obtain the zebra striping form the 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();
      }
});

任何建议都值得赞赏.

推荐答案

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

The zebra widget only applies to visible rows, so you'll need to trigger the applyWIdgets method. And I'm going to assume you are using jQuery UI 1.10.2 and jQuery 2.0, where you can use the activate callback (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"]
                });
            }
        }
    }
});

更新:糟糕，如果表格位于第一个标签中，请使用此代码(演示):

Update: Oops, if the table is in the first tab, use this code (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);
            }
        }
    }
});

这篇关于Tablesorter的jqueryui选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！