タブ付きデータテーブルのパフォーマンスが遅い

Question

5つのデータテーブルを持つWebページが別々のタブにあります。ページの上部にあるフィルタには、コードが入力されたテスト要素が含まれています。入力された文字ごとに、5つの別々のAJAX呼び出しが行われ、各タブが更新されます。 リモートユーザーが3分以上の待ち時間を経験し、効果的にページを無駄にしてしまうため、パフォーマンスが著しく低下しました。

どのタブが選択されているかを判断して、選択したタブのみを一度に更新するのは苦労しています。 2番目のコードブロックでコメントした、悪いコードがあります。タブを取得できず、描画を実行してそのコードブロックを置き換えることができません。どんな指導も高く評価

これらのタブです：

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

私の現在のコード、ショーとしてすべての5つのタブがあり、そして私が正しくあなたを理解している場合、各タブから

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

を歩く...

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

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