Langsame Leistung mit Tabbed-Datatabellen

Question

Ich habe eine Webseite mit 5 Datentabellen in separaten Registerkarten. Der Filter oben auf der Seite enthält ein Testelement, das mit einem Code gefüllt ist. Für jedes eingegebene Zeichen werden 5 separate AJAX-Aufrufe durchgeführt, um jede Registerkarte zu aktualisieren. Dies hat zu einer extrem schlechten Leistung geführt, da die Remote-Benutzer Wartezeiten von mehr als 3 Minuten haben, was die Seite effektiv nutzlos macht.

Ich habe es schwer zu bestimmen, welche Registerkarte ausgewählt ist und nur die ausgewählte Registerkarte auf einmal aktualisieren. Ich habe einen schlechten Code, mit dem ich versucht habe zu arbeiten, kommentiert im zweiten Codeblock. Der Tab konnte nicht abgerufen werden, um die Zeichnung auszuführen und diesen Codeblock zu ersetzen. Jede Anleitung geschätzt.

Dies sind die Registerkarten:

<ul class="nav nav-tabs" role="tablist" id="Status"> 
    <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1 Data</a></li> 
    <li role="presentation"><a href="#Tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2 Data</a></li> 
    <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab3 Data</a></li> 
    <li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Tab4 Data</a></li> 
    <li role="presentation"><a href="#tab5" aria-controls="tab5" role="tab" data-toggle="tab">Tab5 Data (Legacy)</a></li> 
</ul> 

Meine aktuellen Code, hat alle 5 Registerkarten als Show und geht durch jede Registerkarte

function filterShortCode() { 
    // var tabIndex = &(this).find("a").attr("href"); 
    // $(tabIndex).DataTable().search(
    $('#gridTab1').DataTable().search(
     $('#global_sc').val() 
     ).draw(); 
    $('#gridTab2').DataTable().search(
     $('#global_sc').val() 
     ).draw(); 
    $('#gridTab3').DataTable().search(
     $('#global_sc').val() 
     ).draw(); 
    $('#gridTab4').DataTable().search(
     $('#global_sc').val() 
     ).draw(); 
    $('#gridTab5').DataTable().search(
     $('#global_sc').val() 
     ).draw(); 
    }; 

Answer 1

Wenn ich Sie richtig verstanden ...

var activeNavItem = $("#Status li.active"); 
var activeGrid = $("#Status li").index(activeNavItem)) + 1; 

$('#gridTab' + activeGrid).DataTable().search(
    $('#global_sc').val() 
     ).draw();