2

我正在使用 Datatables 使用 jquery 在 4 个选项卡上显示 4 个单独的动态表。一切正常，但我遇到的问题是，在单击每个相应的选项卡时，数据表会同时进行 4 个 ajax 调用（通过萤火虫查看），这导致所选选项卡/表的滞后。

我不确定是否或为什么它会为每个选项卡触发 - 任何帮助都会受到重视

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

1 回答 1

0

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

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

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

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

- 反而。这样，您将处理正确的表格，并且仅针对该表格。

注意：完全未经测试，因为我无法重现您的 ASP 场景。

于 2013-11-11T13:28:07.563 回答