通過 JavaScript

通過 JavaScript 調用帶有 id 表的引導表。

<table id="table"></table>

$('#table').bootstrapTable({
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
})

另一種模式

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello, Bootstrap Table!</title>

  <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css>">
  <link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/bootstrap-table.min.css>">
</head>

<body>
  <div class="container mt-5">

    <table id="table">
      <thead>
        <tr>
          <th data-field="id">Item ID</th>
          <th data-field="name">Item Name</th>
          <th data-field="price">Item Price</th>
        </tr>
      </thead>

    </table>

  </div>

  <script src="<https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js>"></script>
  <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="<https://unpkg.com/[email protected]/dist/bootstrap-table.min.js>"></script>

  <script>
    $('#table').bootstrapTable({
      data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
      }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
      }]

    });
  </script>
</body>

</html>