CODEWITHSUNDEEP
jquerytwitter-bootstrap-3datatables
Allan L
Allan L

Reputation: 113

Slow performance with tabbed datatables

I have a web page with 5 data tables in separate tabs. The filter at the top of the page contains a test element which is populated with a code. For each character typed, 5 separate AJAX calls are made to update each tab. This has resulted in extremely poor performance, for the remote users experiencing wait times of over 3 minutes, effectively making the page useless.

I'm having a hard time to determine which tab is selected and update only the selected tab at a time. I have some bad code I've been trying to get to work, commented in the second code block. Unable to get the tab, to perform the draw, and replace that block of code. Any guidance appreciated.

These are the tabs:

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

My current code, has all 5 tabs as show, and walks through each tab

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

Upvotes: 0

Views: 142

Answers (1)

jgec
jgec

Reputation: 41

If I understood you correctly...

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

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

Upvotes: 1

Related Questions