laravel 刀片中的引导选项卡和数据表

Question

我正在使用具有多个数据表的引导选项卡。我发现这个脚本会在每个选项卡中显示数据表，但我的问题是数据表一直在添加。

这是我找到的脚本：

<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

从“shown.bs.tab”中删除您的数据表初始化，并在 dom 准备好时将其放置如下。

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

因为$('a[data-toggle="tab"]').on('shown.bs.tab', function(){}); 每次点击标签时都会触发。看这里DOC

Answer 2

经过考虑，这只是一种传统的修复方式。我将花时间编写仅使用一个数据表的动态代码

//标签

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