Bootstrap tab with datatables scroller plugins cannot load data properly

jemz

I am using bootstrap tab in datatables scroller plugins,the problem is that when I switch back and forth to my two tabs the second tab will not load the records
if I wait 5-10 seconds it loads the record,then if I switch back to first tab the records are not loaded again,

$(function(){
   
    $('#updatetable').dataTable({
        "ajax": "./get_updates.php?idno=" + idno,
        "scrollY": "200px",
        "dom": "frtiS",
        "scrollCollapse": true,
        "deferRender": true,
        "columns": [
            {"data": "id"},
            {"data": "time"},
            {"data": "name"},


        ]

    });


    updatetbl = $('#updatetable').DataTable();

   setInterval( function () {
        updatetbl.ajax.reload();
    }, 5000 );

    
    
    
    
     $('#alarmtable').dataTable( {
        "ajax": "getstudent.php",
        "scrollY": "200px",
        "dom": "frtiS",
        "scrollCollapse": true,
        "deferRender": true,
        "columns": [
            { "data":"studentno"},
            { "data":"studentname"},
            { "data":"age"},
            { "data":"sex"},
            { "data":"address"}


        ]

    });

    alarmtbl = $('#alarmtable').DataTable();

    setInterval( function () {
        alarmtbl.ajax.reload();
    }, 5000 );

    
    
    //Then I use this inorder my header of my table will not misalign to the columns
    
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        e.target // activated tab
        e.relatedTarget // previous tab
        var table = $.fn.dataTable.fnTables(true);
        if (table.length > 0) {
            $(table).dataTable().fnAdjustColumnSizing();
        }
    });
    
    
    


});

<div class="container">
           <div class="row">
               <div class="col-xs-12 col-sm-6 col-md-12">
                  <ul class="nav nav-tabs" role="tablist" id="bottomTab">
                      <li role="presentation" class="active">
                           <a href="#alarm" aria-controls="alarm" data-toggle="tab" id="alarmtab" role="tab">
                               <i class="fa fa-exclamation-triangle fa-fw"></i>student

                           </a>
                      </li>

                      <li role="presentation"><a href="#update" aria-controls="alarm" data-toggle="tab" id="updatetab" role="tab">
                              <i class="fa fa-cog fa-fw"></i>updates</a></li>


                  </ul>

                  <div class="tab-content">
                      <div role="tabpanel" class="tab-pane fade in active" id="alarm">
                          <div class="table-responsive">
                              <table class="display table" id="alarmtable" cellspacing="0" width="100%">
                                  <thead>
                                      <tr>
                                          <th>STUDENTNO</th>
                                          <th>STUDENT NAME</th>
                                          <th>AGE</th>
                                          <th>SEX</th>
                                          <th>ADDRESS</th>
                                          
                                      </tr>
                                  </thead>
                              </table>
                          </div>
                       </div>
                      <div role="tabpanel" class="tab-pane fade" id="update">
                          <div class="table-responsive">
                              <table class="table table-striped" id="updatetable"  cellspacing="0" width="100%">
                                  <thead>
                                      <tr>
                                          <th>ID</th>
                                          <th>TIME</th>
                                          <th>NAME</th>
                                      </tr>
                                  </thead>
                              </table>
                          </div>


                      </div>

                  </div>
              </div>

           </div>

        </div>


    </div>

Thank you in advance.

jemz

HI, I found what causes the problem. In my second datatable I remove this option
"dom": "frtiS", and it display correctly switching back and forth with my two bootstrap tabs...but I want the two of them is scroller enabled but I cannot use this option
"dom": "frtiS", to the second datatable because it will not display properly or nothing would be display in second tab if use this option.

Thank you in advance.

allan

Can you link to a test case showing the issue please.

Allan

jemz

HI @allan, I already send you the test case via PM.

Thank you in advance.

allan

Hi,

Thanks for the links. I've not had a chance to look into it just yet, but I will try to do so shortly.

Allan

jemz

Hi @allan, Thank you I will just wait. :)

jemz

Hi @allan , have you tried to access the link ?

Thank you in advance.

allan

Not yet, sorry. Huge support back log at the moment. Priority support is available if you need this urgently.

Allan

jemz

@allan, It's okay , I will just wait.

karthickkumar678

HI, I found what causes the problem. In my second datatable I remove this option "dom": "frtiS", and it display correctly switching back and forth with my two bootstrap tabs...but I want the two of them is scroller enabled but I cannot use this option "dom": "frtiS", to the second datatable because it will not display properly or nothing would be display in second tab if use this option.