使用 bootstrap 使表交互答案

【问题标题】：use bootstrap to make table interactive使用 bootstrap 使表交互
【发布时间】：2022-11-14 03:56:05
【问题描述】：

我有一个 html 表格，我想进行交互、排序、过滤等操作。我看了这个很棒的 tutorial 并想我会尝试复制它。但是什么也没发生，我不确定我错过了什么？我的代码如下。

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

【问题讨论】：

使用browser console (dev tools)（点击F12），读取任何错误。你确定图书馆正在加载吗？开发工具提供了一个网络标签。是资源成立（例如 HTTP 200 响应）？如果不是，哪个实际网址被要求？相应地修改 URL。 data=toggle="table" 应该是 data-toggle="table"。
很有帮助啊！我可以看到所有引导程序和 jquery 都加载资源失败：net::ERR_FILE_NOT_FOUND。猜我需要下载一些东西？

标签： javascript html bootstrap-4

【解决方案1】：

例如，您可以使用 CDN：

<!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 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="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>

【讨论】：