Search code examples
javascripthtmlbootstrap-4

use bootstrap to make table interactive

I have a html table that I would like to make interactive, sorting, filtering etc. I watched this great tutorial & thought I would try replicating it. However nothing happens what so ever, I am not sure what I am missing? My code is below.

<!doctype html>
<html>
 <head>
   <link rel="stylesheet" href="css/bootstrap.min.css"> 
   <link rel="stylesheet" href="css/bootstrap-table.min.css">
 </head>
 <body>
  <div class="container">
   <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
        <thead>
            <tr>
            <th scope='col'>Column 1</th>
            <th scope='col'>Column 2</th>
            <th scope='col'>Column 3</th>
            <th scope='col'>Column 4</th>
            <th scope='col'>Column 5</th>
            <th scope='col'>Column 6</th>
            </tr>
    </thead>   
  <tbody>
        <tr>
        <td>Conf</td>
        <td>even 20 trail A</td>
          <td>True</td>
        <td>False</td>
        <td>0</td>
          <td>True</td>
        </tr>
        <tr>
        <td>Conf</td>
          <td>even 20 trail B</td>
        <td>True</td>
          <td>False</td>
        <td>0</td>
        <td>True</td>
        </tr>
        </tbody>
     </table>
</div>
<script src="js/jQuery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script>
    $(document).ready(function(){
     $('table').bootstrapTable();
    });
</script>
Solution

  • You can use a cdn for example:

    Update: added data-sortable="true" to each column header. Nice.

    <!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data-toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th data-sortable="true" scope='col'>Column 1</th>
          <th data-sortable="true" scope='col'>Column 2</th>
          <th data-sortable="true" scope='col'>Column 3</th>
          <th data-sortable="true" scope='col'>Column 4</th>
          <th data-sortable="true" scope='col'>Column 5</th>
          <th data-sortable="true" scope='col'>Column 6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
        </tr>
      </tbody>
    </table>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>

  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });
  </script>