選項卡式數據表的性能降低

Question

我有一個網頁，在單獨的標簽中包含5個數據表。 頁面頂部的過濾器包含一個測試元素，其中填充了代碼。 對於每個鍵入的字符，將進行5個單獨的AJAX調用以更新每個選項卡。 對於遠程用戶來說，等待時間超過3分鍾，實際上導致該頁面無用，從而導致性能極差。

我很難確定選擇哪個選項卡，並且一次只更新所選的選項卡。 我有一些不好的代碼，我一直在努力工作，在第二個代碼塊中進行了注釋。 無法獲取選項卡，無法執行繪制並替換該代碼塊。 任何指導表示贊賞。

這些是選項卡：

<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();