jquery - タブ内のJQueryテーブルソーターゼブラストライプ

Question

JQueryタブを使用するWebページがあり、タブの3つには、ゼブラストライプでJQueryテーブルソーターを使用しようとしているテーブルがあります。最初のタブには、正しく機能するテーブルがあります。3番目と4番目のタブテーブルは正しく並べ替えられますが、最初にタブを表示したとき、テーブルにはゼブラストライプがありませんが、正しく並べ替えられています。列ヘッダーの1つをクリックしてテーブルを並べ替えると、それが並べ替えられ、ゼブラストライプが機能します。タブを最初に表示したときにストライプを機能させる方法を理解しようとしています。最初は$.readyコードにすべてのテーブルソーターコードが含まれていましたが、それが機能しない場合は、タブが選択されているときに並べ替えてみました。以下は私のコードです：

<script type="text/javascript">
$(function() {
  $('#tabs').tabs({
    select: function(event, ui) {
      switch (ui.index) {
        case 3:
          $("#bTable").tablesorter({widgets: ['zebra'] , sortList: [[0,0]]});
          break;    
        case 4:
          $("#cTable").tablesorter({widgets: ['zebra'] , sortList: [[0,0]]});
          break;
      }
    }});
});

$(document).ready(function()     {
  $("#aTable").tablesorter({ 
      widgets: ['zebra'] 
  });  
});
</script>