Скрытие и отображение частей страницы с помощью 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/

Проблема в том, что мой контент не просто текст, а таблицы на основе JS, заполненные пост-вызовами ajax. Я хочу, чтобы вся страница завершила загрузку (около 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 на странице. К сожалению, это происходит каждый раз и очень много времени.