Bootstrap Table: A Clean and Flat Table

Add-ons

2026-07-26 02:43 4 次浏览 • 0 次下载 100.7KB

Plugin Description: To improve development efficiency and reduce development time, Bootstrap Table, a lightweight table plugin based on Bootstrap, is now available. With just a simple configuration, you can enjoy powerful features including fixed headers, single/multiple selection, sorting, pagination, searching, and custom headers.

Features

Developed with Bootstrap 3 (also supports Bootstrap 2)
Responsive interface
Fixed table header
Fully configurable
Supports data attributes
Show/Hide Columns
Show/hide table headers
Retrieve JSON data using AJAX
Easy sorting by clicking table headers
Supports custom column visibility
Supports single/multiple selection
Powerful pagination
Supports card layout
Supports multiple languages

Usage

1. Include the Bootstrap library (if your project does not already use it) and bootstrap-table.css in the head section of your HTML page.

1 2	`<link` `rel="stylesheet"` `href="bootstrap.min.css">` `<link` `rel="stylesheet"` `href="bootstrap-table.css">`

2. Include the jQuery library, Bootstrap library (if your project does not already use it), and bootstrap-table.js in the head section or before the closing body tag (recommended).

<script src="jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script src="bootstrap-table.js"></script>

3. Specify the data source. There are two ways to do this:

1) Using data attributes

Set data-toggle="table" on a regular table to enable Bootstrap Table without writing any JavaScript.

<table data-toggle="table" data-url="data.json">
            <thead>
                ...    
            </thead>
        </table>

2) Setting the data source using JavaScript

Use JavaScript to enable a table with an id attribute.

$('#table').bootstrapTable({
          url: 'data.json' 
        });

For parameter details, refer to the official documentation.