Bootstrap вкладка и данные в лезвии ларавеллы

Question

Я работаю над вкладкой bootstrap с несколькими таблицами данных. Я нашел этот скрипт, который будет отображать таблицы данных на каждой вкладке, но моя проблема в том, что таблица данных продолжает добавлять.

Вот скрипт, который я нашел:

<script type="text/javascript">
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // console.log(e.target.href);
        $('table.display').DataTable();
    })
</script>

Как я могу это исправить? Большое спасибо заранее

Answer 1

Удалите ваш datatable init из файла «selected.bs.tab» и поместите его, когда dom будет готов, следующим образом.

$(document).ready(function() { 
  $('table.display').DataTable(); 
}); 

Поскольку $('a[data-toggle="tab"]').on('shown.bs.tab', function(){}); будет срабатывать каждый раз, когда вы нажимаете на вкладку. Смотрите здесь DO C

Answer 2

После обдумывания, это все равно традиционный способ исправить это. Я найду время, чтобы написать динамический код c, используя только одну таблицу данных

//

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Contact</a></li>

  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>
                                     <div class="table-responsive col-md-12">
                                      <table id="mytable" class="table table-bordered table-striped table-highlight">
                                        <thead>
                                          <tr bgcolor="#1cc88a" style="color:#fff;font-size:12px">
                                            <th>Fullname</th>

                                          </tr>
                                        </thead>  
                                        <tbody style="color:#000;font-size:12px">

                                            @foreach($data as $t)     
                                               <tr>
                                               <td>{{ $t->name }}</td>

                                               </tr>
                                            @endforeach
                                            </tbody>

                                      </table>
                                       <hr />
                                    </div>
      </p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3> <div class="table-responsive col-md-12">
                                      <table id="mytable2" class="table table-bordered table-striped table-highlight">
                                        <thead>
                                          <tr bgcolor="#1cc88a" style="color:#fff;font-size:12px">
                                            <th>Fullname</th>
                                            <th>Phone</th>
                                          </tr>
                                        </thead>  
                                        <tbody style="color:#000;font-size:12px">

                                            @foreach($data as $t)     
                                               <tr>
                                               <td>{{ $t->name }}</td>
                                               <td>{{ $t->phone }}</td>
                                               </tr>
                                            @endforeach
                                            </tbody>

                                      </table>
                                       <hr />
                                    </div></h3>
      <p>.</p>
    </div>

  </div>
</div>

// javascript

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<script>

 $(document).ready(function() {
    $('#').DataTable();
  } );

  $(document).ready(function() {
      $('#mytable').DataTable( {
          dom: 'Bfrtip',
          "pageLength": 10,
          buttons: [
              {
                  extend: 'print',
                  customize: function ( win ) {
                      $(win.document.body)
                          .css( 'font-size', '10pt' )
                          .prepend(
                              ''
                          );

                      $(win.document.body).find( 'table' )
                          .addClass( 'compact' )
                          .css( 'font-size', 'inherit' );
                  }
              }
          ]
      } );
  } );



$(document).ready(function() {
          $('#mytable2').DataTable( {
              dom: 'Bfrtip',
              "pageLength": 10,
              buttons: [
                  {
                      extend: 'print',
                      customize: function ( win ) {
                          $(win.document.body)
                              .css( 'font-size', '10pt' )
                              .prepend(
                                  ''
                              );

                          $(win.document.body).find( 'table' )
                              .addClass( 'compact' )
                              .css( 'font-size', 'inherit' );
                      }
                  }
              ]
          } );
      } );


</script>