Jquery ui 进行多个ajax调用的jquery UI选项卡和数据表

我使用Datatables使用jquery在4个选项卡上显示4个独立的动态表。一切正常，但我遇到的问题是，单击每个选项卡时，datatables会同时发出4个ajax调用（通过firebug查看），这会导致所选选项卡/表的延迟

我不知道是谁，也不知道为什么每个标签都会被激活——任何帮助都会被激活

前两个表选项卡的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>

" +
“有具体细节”
);
});
},
“激活”：功能（事件、用户界面）{
如果（$（“#制表符”）.tabs（'option'，'active'）==1）{
jaxUrl=“tableAjax.aspx？type=supervisor&json=yes”；
}else if（$（“#制表符”）.tabs（'option'，'active'）==2）{
jaxUrl=“tableAjax.aspx？type=credit&json=yes”；
}else if（$（“#制表符”）.tabs（'option'，'active'）==3）{
jaxUrl=“tableAjax.aspx？type=historical&json=yes”；
}否则{
jaxUrl=“”；
}
var table=$.fn.dataTable.fnTables（true）；
$（'table.display'）。数据表（{
“bProcessing”：正确，
“bServerSide”：正确，
“sAjaxSource”：jaxUrl，
“bJQueryUI”：没错，
“阿伦提努”：[[5,10,15,25,50,100,200]，[5,10,15,25,50,100,200]，
“iDisplayLength”：25，
“bDestroy”：正确
});
}
});
});

这是由初始化调用引起的：

$（'table.display'）。数据表（{
...

每次显示/激活选项卡时，都会为每个表运行。您只是忘记了将要激活的选项卡上的表作为目标。请使用：

var index=$（“#tabs”）.tabs（'option'，'active'）；
$（'table.display'）.eq（index-1）.数据表（{
...

--相反，这样您将寻址正确的表，并且只寻址该表

---

注意：由于我无法复制您的ASP场景，因此完全取消测试。

首先，很抱歉延迟响应。其次，非常感谢您的回答。您的解决方案有效，现在页面运行得令人惊讶。我非常感谢您的帮助。

  <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>