bootstrap-table

Version1.27.3 (latest)1.27.01.26.01.24.21.24.1

Released 5 months ago · Installed 3 days ago

Requires jQuery, Bootstrap CSS + JS, then bootstrap-table. Order matters.

<!-- CSS in <head>: Bootstrap + bootstrap-table -->
<link rel="stylesheet" href="https://cdn.roste.org/bootstrap/latest/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.roste.org/bootstrap-table/latest/bootstrap-table.min.css" />

<!-- JS before </body>: jQuery → Bootstrap → bootstrap-table -->
<script src="https://cdn.roste.org/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.roste.org/bootstrap/latest/bootstrap.bundle.min.js"></script>
<script src="https://cdn.roste.org/bootstrap-table/latest/bootstrap-table.min.js"></script>

Download zip

Basic table (HTML data)

View HTML

<table data-toggle="table">
  <thead><tr><th data-sortable="true">ID</th><th>Name</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>1</td><td>Item 1</td><td>$1</td></tr>
    <tr><td>2</td><td>Item 2</td><td>$2</td></tr>
  </tbody>
</table>

Table from JavaScript data

View HTML

<table id="tableJs" data-toggle="table" data-pagination="true" data-search="true">
  <thead><tr><th data-field="id">ID</th><th data-field="name">Name</th><th data-field="price">Price</th></tr></thead>
</table>
<script>
$("#tableJs").bootstrapTable({ data: [
  { id: 1, name: "Item 1", price: "$1" },
  { id: 2, name: "Item 2", price: "$2" }
]});
</script>

Table with search & pagination

View HTML

<table data-toggle="table" data-search="true" data-pagination="true" data-page-size="5">
  <thead><tr><th data-sortable="true">ID</th><th>Name</th><th>Price</th></tr></thead>
  <tbody>...</tbody>
</table>