jquery UI tabs и Datatables, делающие несколько вызовов ajax

Question

Я использую Datatables для отображения 4 отдельных и динамических таблиц на 4 вкладках с использованием jquery. Все работает, но проблема заключается в том, что при нажатии каждой соответствующей вкладки datatables одновременно выполняет 4 вызова ajax (просматривается через firebug), что вызывает задержку для выбранной вкладки/таблицы.

Я не уверен, были или почему он стреляет по каждой из вкладок - любая помощь apperciated

HTML для первых двух вкладок таблицы:

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Instructions</a></li> 
    <li><a href="#tabs-2">Supervisors</a></li> 
    <li><a href="#tabs-3">Credit</a></li> 
    <li><a href="#tabs-4">Historical</a></li> 
    <li><a href="#tabs-5">Agency</a></li> 
    <li><a href="#">Place Holder</a></li> 
</ul> 
    <div id="tabs-2"> 
    <asp:Table ID="displayTable1" class="display displayTable" runat="server"> 
    <asp:TableHeaderRow runat="server" ForeColor="Black" BackColor="Gray" TableSection="TableHeader"> 
      <asp:TableHeaderCell>SuperVisorStatus</asp:TableHeaderCell>  
      <asp:TableHeaderCell>CreditUpdates</asp:TableHeaderCell>  
      <asp:TableHeaderCell>SupervisorStatusDate</asp:TableHeaderCell>  
      <asp:TableHeaderCell>CreditUpdatesDate</asp:TableHeaderCell> 
      <asp:TableHeaderCell>Selltokey</asp:TableHeaderCell> 
      <asp:TableHeaderCell>customer</asp:TableHeaderCell> 

    </asp:Table> 
</div> 
    <div id="tabs-3"> 
    <asp:Table ID="displayTable2" class="display displayTable" runat="server"> 
    <asp:TableHeaderRow runat="server" ForeColor="Black" BackColor="Gray" TableSection="TableHeader"> 
      <asp:TableHeaderCell>SuperVisorStatus</asp:TableHeaderCell>  
      <asp:TableHeaderCell>CreditUpdates</asp:TableHeaderCell>  
      <asp:TableHeaderCell>SupervisorStatusDate</asp:TableHeaderCell>  
      <asp:TableHeaderCell>CreditUpdatesDate</asp:TableHeaderCell> 
      <asp:TableHeaderCell>Selltokey</asp:TableHeaderCell> 
      <asp:TableHeaderCell>customer</asp:TableHeaderCell> 
    </asp:Table> 
</div> 

А вот мой JQuery:

<script type="text/javascript"> 

$(function() { 
    $("#tabs").tabs({ 
      beforeLoad: function(event, ui) { 
       ui.jqXHR.error(function() { 
        $("#loading").hide(); 
        ui.panel.html(
         "<b>Whoops! We've experienced some sort of error!</b><br> <br>Please contact <a href="me@a.b">me!</a>" + 
         " with specific details" 
        ); 
       }); 
      }, 
     "activate": function(event, ui) { 
      if ($("#tabs").tabs('option', 'active') === 1) { 
       jaxUrl = "tableAjax.aspx?type=supervisor&json=yes"; 
      } else if ($("#tabs").tabs('option', 'active') === 2) { 
       jaxUrl = "tableAjax.aspx?type=credit&json=yes"; 
      } else if ($("#tabs").tabs('option', 'active') === 3) { 
       jaxUrl = "tableAjax.aspx?type=historical&json=yes"; 
      } else { 
       jaxUrl = ""; 
      } 

      var table = $.fn.dataTable.fnTables(true); 
      $('table.display').dataTable({ 
       "bProcessing": true, 
       "bServerSide": true, 
       "sAjaxSource": jaxUrl, 
       "bJQueryUI": true, 
       "aLengthMenu": [[5, 10, 15, 25, 50, 100, 200], [5, 10, 15, 25, 50, 100, 200]], 
       "iDisplayLength": 25, 
       "bDestroy": true 
      }); 
     } 
    }); 
}); 
    </script> 

Answer 1

Это вызвано из-за вашего вызова инициализации:

$('table.display').dataTable({ 
... 

, который будет работать для каждый таблица каждый раз, когда отображается вкладка. Вы просто забываете таргетировать таблицу на вкладке, которую нужно активировать только. Использование:

var index=$("#tabs").tabs('option', 'active'); 
$('table.display').eq(index-1).dataTable({ 
... 

- вместо этого. При этом вы будете обращаться к правой таблице и только к этой таблице.

Примечание: полностью не проверено, так как я не могу воспроизвести ваш ASP-сценарий.