Question

我使用Datatables使用jquery在4个选项卡上显示4个独立的动态表。一切正常但我遇到的问题是，点击每个相应的标签后，数据表会同时进行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>

这是我的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场景，因此完全无法使用。

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

1 个答案: