use bootstrap to make table interactive-CodePudding

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

CodePudding user response：

I think you need to make the columns sortable by adding data-sortable="true" to each column header.

Also, don't forget to include all the necessary libraries

See DEMO below

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<div >
  <table  data=toggle="table" data-search="true" data-show-columns="true">
    <thead>
      <tr>
        <th scope='col' data-sortable="true">Column 1</th>
        <th scope='col' data-sortable="true">Column 2</th>
        <th scope='col' data-sortable="true">Column 3</th>
        <th scope='col' data-sortable="true">Column 4</th>
        <th scope='col' data-sortable="true">Column 5</th>
        <th scope='col' data-sortable="true">Column 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Conf F</td>
        <td>even 20 trail A</td>
        <td>True</td>
        <td>False</td>
        <td>0</td>
        <td>True</td>
      </tr>
      <tr>
        <td>Conf D</td>
        <td>even 20 trail B</td>
        <td>True</td>
        <td>False</td>
        <td>1</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>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>

<body>
  <div >
    <table  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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

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