2

jqueryを使用して、Datatablesを使用して4つのタブに4つの個別の動的テーブルを表示しています。すべてが機能しますが、私が抱えている問題は、それぞれのタブをクリックすると、datatables が同時に 4 つの ajax 呼び出しを行い (firebug を介して表示)、選択したタブ/テーブルに遅延が発生することです。

各タブで起動していたのか、なぜ起動しているのかはわかりません-ヘルプがあれば感謝します

最初の 2 つのテーブル タブの 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 に答える