Я использую jQuery с Bootstrap базой данных, использовал несколько баз данных на одной странице, но не работает, реагирует - PullRequest
Новая
       20

Я использую jQuery с Bootstrap базой данных, использовал несколько баз данных на одной странице, но не работает, реагирует

0 голосов
/ 21 марта 2020

Я использую jQuery с Bootstrap данными, я использовал несколько таблиц данных на одной странице, но он не работает в ответ на вкладки Bootstrap, но он не работает, и я использую ниже jQuery и Bootstrap CDN связывается по порядку 

 <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="../assets/vendors/datatables/css/dataTables.bootstrap4.min.css">
      <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
      <link rel="stylesheet" type="text/css" href="../assets/vendors/datatables-buttons/buttons.dataTables.css">
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="../assets/vendors/datatables/js/jquery.dataTables.min.js"></script>
        <script src="../assets/vendors/datatables/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
    </head>
    <body>

и используется во вкладках bootstrap с предложениями по исправлению. 

<div class="row">
  <div class="col-md-12 margin-bottom-20">
    <ul class="tabs">
      <li class="active" rel="tab1" >
      <a class="nav-link active" href="javascript: void(0);" data-toggle="tab" role="tab"><span class="tab_head_text">Renewals</span></a>
      </li>

      <li rel="tab2">
      <a class="nav-link" href="javascript: void(0);" data-toggle="tab" role="tab"><span class="tab_head_text">Renewal </span> </a>    
      </li>
    </ul>

  </div>
</div>   
<div class="tab_container">
  <h3 class="d_active tab_drawer_heading" rel="tab1">Upcoming Renewals</h3>
  <div id="tab1" class="tab_content">
  <h3 class="text-center">Upcoming Renewals</h3>
    <table class=" table display dt-responsive" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Sl</th>
          <th>Name</th>
          <th>Phone</th>
          <th>Renew Now</th>
          <th>Send SMS</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
          <td>ddd</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="tab_container">
  <h3 class="d_active tab_drawer_heading" rel="tab2">completed Renewals</h3>
  <div id="tab2" class="tab_content">
      <h3 class="text-center">completed Renewals</h3>
<table class=" table display dt-responsive" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Sl</th>
          <th>Name</th>
          <th>Phone</th>
          <th>Renew Now</th>
          <th>Send SMS</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
          <td>ddd</td>
        </tr>
          </tbody>
    </table>
          </div>
</div>

сценарий с данными здесь 

 <script>
   $("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
  console.log( 'show tab' );
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc();
});

 $('table.display').DataTable({
            responsive: true,
            "lengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
            autoWitdh: false
        });

});
    </script>
...