Tablo üstbilgisi, panel gövdesi önyüklemesinin içinde birden çok tablo olduğunda daraltılır

Question

önyükleme paneli ve yatay-tabmenu kullanarak bir sayfa yapıyorum. İlk masam üstbilgi hizalamada iyidir, ancak ikinci ve üçüncü tablo başlıkları masa gövdesi ile daraltılmış durumda. Bu benim denediğim benim örneğim, lütfen birisi bana yardım etsin.

<div class = "panel panel-default"> 

     <div class = "panel-heading"> 
     <ul class = "nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
      <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
     </ul> 
     </div> 

    <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
     <div class = "table-responsive"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="contract_wise" class="table table-bordered table-colstriped table-hover"> 
       <thead> 
        <tr> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
        </tr> 
       </thead> 
      </table> 
     </div> 
     </div> 
     <div id="menu1" class="tab-pane fade"> 
     <div class = "table-responsive"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="sdm_wise" class="table table-bordered table-colstriped table-hover"> 
       <thead> 
        <tr> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
        </tr> 
       </thead> 
      </table> 
     </div> 
     </div> 
     <div id="menu2" class="tab-pane fade"> 
      <h3>Menu 2</h3> 
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
     </div> 
     <div id="menu3" class="tab-pane fade"> 

     </div> 
    </div> 
</div> 

bootstrap.html Yani ilk tablo mükemmel çalışır, ancak aynı paneli vücuda ikinci bir tablo eklerseniz, başlıklar önceden, collapsed.So bana yardım edin teşekkürler olsun.

problamatic tablo için benim ajax:

jQuery("#sdm_wise").dataTable({ 
      dom: "<'row'<'col-sm-12'Bftri>>" + "<'row'<'col-sm-4'l><'col-sm-8'p>>", 
      "sAjaxSource": "report_datatable_db.php?mode=sdm_wise_datatable", 
      "bDestroy": true, 
      "scrollX": true, 
      "bInfo": true, 
      select: true, 
      buttons: [{ 

        extend: 'collection', 
        text: 'Export', 
        buttons:[ 
          { 
           extend: 'pdfHtml5', 
           orientation: 'landscape', 
           pageSize: 'LEGAL', 
           text: '<i class="fa fa-file-pdf-o">&nbsp&nbsp&nbsp&nbsp&nbspPDF</i>', 
           titleAttr: 'PDF' 
          }, 
          { 
           extend: 'excelHtml5', 
           orientation: 'landscape', 
           pageSize: 'LEGAL', 
           text: '<i class="fa fa-file-excel-o">&nbsp&nbsp&nbsp&nbsp&nbspEXCEL</i>', 
           titleAttr: 'Excel' 
          }, 
          { 
           extend: 'csvHtml5', 
           orientation: 'landscape', 
           pageSize: 'LEGAL', 
           text:  '<i class="fa fa-file-text-o">&nbsp&nbsp&nbsp&nbsp&nbspCSV</i>', 
           titleAttr: 'CSV' 
          }, 
          { 
           extend: 'copyHtml5', 
           orientation: 'landscape', 
           pageSize: 'LEGAL', 
           text: '<i class="fa fa-files-o">&nbsp&nbsp&nbsp&nbsp&nbspCOPY</i>', 
           titleAttr: 'Copy' 
          } 
       ] 
       }, 
       { 
        extend: 'print', 
        orientation: 'landscape', 
        pageSize: 'LEGAL' 
       } 
       ] 
    }); 

Ve MySQL altındadır veri ayıklamak için kullanılan yönteme,

$rows = array(); 
     if (mysqli_multi_query($mysqli, $query)) { 
      do { 
       if ($result = mysqli_store_result($mysqli)) { 
        while ($row = $result->fetch_array()) { 
         $rows[] = $row; 
        } 
        $result->free(); 
       } 
      } while (mysqli_next_result($mysqli)); 
     } 
     mysqli_free_result($result); 

     $results = array("aaData"=>$rows); 
     echo json_encode($results); 
     exit; 

Answer 1

Ben bs-bileşen gibi sınıfları kullanarak bu sabit , col-lg-12 ve satır, İşte benim html ve gezinti sekmeleri hizalama.

index.html:

<div class="row"> 
      <div class="col-lg-12"> 
<div class="bs-component"> 
        <ul class="nav nav-tabs responsive"> 
         <li class="active"> 
          <a data-toggle="tab" href="#tab1">Contract-Wise</a> 
         </li> 
         <li>  
          <a data-toggle="tab" href="#tab2" onclick = "show_sdm()">SDM-Wise</a> 
         </li> 
         <li> 
          <a data-toggle="tab" href="#tab3" onclick = "show_sub()">SUB-Wise</a> 
         </li> 
           <li> 
          <a data-toggle="tab" href="#tab4" onclick = "show_chain()">ChainName-Wise</a> 
         </li> 
        </ul> 

<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade active in"> 
     <table id = "contract_wise" class="table table-striped table-bordered table-hover footable toggle-medium"> 
      <thead> 
       <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
        <th></th> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 

col-lg-12 gibi büyük ve daha sonra ana önemli bir sınıfı bs bileşenli Tablo boyutunu ilan sonra ilk sınıf satır kafese yerleştirilerek ve Artık her gezinme sekmesi için birden fazla tabloya sahip olmak oldukça kolay.