使用Jquery和JS隐藏和显示页面的一部分

Question

function init_json_table(element) {
    var table_name = element;
    $.ajax({
      url:'get_structure',
      type:"POST",
      data: JSON.stringify({"table":table_name}),
      contentType:"application/json; charset=utf-8",
      dataType:"json",
      success: function(data) {
        $('#' + element).w2grid(data);
      }
    })
};

$(document).ready(function() {
  //initilize all tables on page - fetch data from server
   $('.table').each(function() {
      init_json_table($(this).attr('id'));
   });
   // hiding and showing sections on click
    $('header nav a').click(function() {
        var $linkClicked = $(this).attr('href');
        document.location.hash = $linkClicked;
        if (!$(this).hasClass("active")) {
            $("header nav a").removeClass("active");
            $(this).addClass("active");
            $('#main-content section').hide();
            $($linkClicked).fadeIn();
            return false;
        }
        else {
            return false;
        }
    });
    var hash = window.location.hash;
    hash = hash.replace(/^#/, '');
    switch (hash) {
        case 'block2' :
            $("#" + hash + "-link").trigger("click");
            break;
        case 'block3' :
            $("#" + hash + "-link").trigger("click");
            break;
    }
});

#block2, #block3 {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <nav>
        <ul>
          <li><a href="#block1" id="block1-link">block1</a></li>
          <li><a href="#block2" id="block2-link">block2</a></li>
          <li><a href="#block3" id="block3-link">block3</a></li>
        </ul>
    </nav>
</header>
<div id="main-content">
  <section id="block1">
    <div class="table" id=block1_table1></div>     
    <div class="table" id=block1_table2></div>     
    <div class="table" id=block1_table3></div>     
  </section>
  <section id="block2">
    <div class="table" id=block2_table4></div>     
    <div class="table" id=block2_table5></div>     
    <div class="table" id=block2_table6></div>     
  </section>
  <section id="block3">
    <div class="table" id=block3_table7></div>     
    <div class="table" id=block3_table8></div>     
    <div class="table" id=block3_table9></div>     
  </section>
</div>

我尝试用jQuery实现页面切换的这个想法： http://netdna.webdesignerdepot.com/uploads7/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/demo1/#page1

问题是我的内容不仅仅是文本，而是基于JS的表填充了ajax post调用。我希望整个页面完成加载（大约40-50个ajax调用），所有JS表进行初始化，然后实现各部分之间的无缝切换。但是，只有第一页（未隐藏）加载正常，其余页面加载空div而不是JS表。

编辑：我找到了解决方法：

    $('header nav a').click(function() {
        var $linkClicked = $(this).attr('href');
        document.location.hash = $linkClicked;
        if (!$(this).hasClass("active")) {
            $("header nav a").removeClass("active");
            $(this).addClass("active");
            $('#main-content section').hide();
//workaround
            $('.table').each(function() {
                w2ui[$(this).attr('id')].refresh();
            });
            $($linkClicked).fadeIn();
            return false;
        }
        else {
            return false;

每次单击页面按钮时，我都会刷新页面中的所有javascript表。不幸的是，这种情况每次都会发生，而且非常耗时。