Bootstrap Table API
Introduction
The Bootstrap Table is a popular and powerful component of the Bootstrap framework that enables developers to create responsive and interactive tables. This guide will provide an overview of the Bootstrap Table API, its features, methods, and options.
Features
Responsive Design: The Bootstrap Table automatically adjusts its layout based on the screen size.
Pagination: Easily add pagination to your tables for better navigation through large datasets.
Sorting: Allow users to sort data by clicking on column headers.
Filtering: Add filtering capabilities to help users find specific data quickly.
Search Box: Provide a search box to allow users to search through the table data.
Column Toggling: Let users show or hide columns as needed.
Export Options: Export table data in various formats like CSV, Excel, and PDF.
Editable Rows: Make rows editable to enable inline editing.
Detail View: Display additional information in a pop-up when a row is clicked.
Tooltips & Popovers: Use Bootstrap’s tooltips and popovers for additional information.
Methods
$('#table').bootstrapTable()
Initialize a new instance of the Bootstrap Table.
| Method | Description |
destroy() |
Destroy the Bootstrap Table instance. |
resetView() |
Reset the view back to its original state. |
load(data) |
Load data into the table. |
append(data) |
Append data to the existing table data. |
refreshOptions(options) |
Refresh the table with new options. |
$('#table').bootstrapTable('getOptions')
Get the current options of the Bootstrap Table instance.
| Method | Description |
'getOptions' |
Get the current options of the Bootstrap Table instance. |
'getData' |
Get the current data of the table. |
'getSelections' |
Get the selected rows from the table. |
$('#table').bootstrapTable('setOptions', options)
Update the options of a Bootstrap Table instance.
| Method | Description |
'setOptions' |
Update the options of the Bootstrap Table instance. |
'checkAll' |
Check all checkboxes in the table. |
'uncheckAll' |
Uncheck all checkboxes in the table. |
'check' |
Check a specific checkbox by index or unique id. |
'uncheck' |
Uncheck a specific checkbox by index or unique id. |
'toggleCheck' |
Toggle a specific checkbox by index or unique id. |
'checkInvert' |
Invert the checked state of all checkboxes in the table. |
'load' |
Reload the table with new data. |
'append' |
Append data to the existing table data. |
'remove' |
Remove rows by index or unique id. |
'resetSort' |
Reset the sorting order of the table. |
'resetFilter' |
Reset the filtering criteria of the table. |
'resetSearch' |
Reset the search query of the table. |
'resetView' |
Reset the view of the table (e.g., reset pagination). |
'selectPage' |
Select a specific page number. |
'selectPageSize' |
Select a specific page size. |
Options
Common Options
| Option | Type | Default | Description |
height |
Number/String | undefined | Set the height of the table. |
methods |
Array | ['get', 'post'] | Set the HTTP methods allowed for the table. |
cache |
Boolean | false | Whether to cache the request. |
contentType |
String | 'application/json' | Set the content type for the request. |
dataType |
String | 'json' | Set the expected data type of the server response. |
timeout |
Number | 0 | Set the request timeout in milliseconds. |
pagination |
Boolean | true | Whether to enable pagination. |
search |
Boolean | true | Whether to enable search functionality. |
searchAlign |
String | 'left' | Alignment of the search box (‘left’, ‘right’, or ‘center’). |
searchOnEnterKey |
String | 'enter' | Key event to trigger search (‘enter’ or ‘change’). |
strictSearch |
Boolean | false | Whether to perform strict search (match whole string). |
showRefresh |
Boolean | false | Whether to show refresh button. |
showToggle |
Boolean | false | Whether to show toggle button. |
showFullscreen |
Boolean | false | Whether to show fullscreen button. |
sortable |
Boolean | true | Whether to enable sorting. |
trimOnSearch |
Boolean | true | Whether to trim whitespace from search input. |
clickToSelect |
Boolean | false | Whether to select row on click. |
uniqueId |
String | 'id' | The field name used as unique identifier for rows. |
cardView |
Boolean | false | Whether to use card view mode. |
detailView |
Boolean | false | Whether to use detail view mode. |
columns |
Array | [] | An array of column definition objects. |
Pagination Options
| Option | Type | Default | Description |
pageSize |
Number | 10 | Number of items per page. |
pageList |
Array | [10, 25, 50] | Available page sizes for user selection. |
onlyInfoPagination |
Boolean | false | Show total records without pagination controls if only one page is available. |
Search Options
| Option | Type | Default | Description |
searchText |
String | '' | Placeholder text for the search input. |
searchPlaceholder |
String | 'Search...' | Placeholder text for the search input. |
Example Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Bootstrap Table Example</h1>
<table id="table"
data-toggle="table"
data-url="https://api.myjson.com/bins/qgxioz"
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>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
</body>
</html>
Conclusion
The Bootstrap Table is a versatile and feature-rich component that can greatly enhance the functionality of your web applications, especially when dealing with large datasets. Its extensive set of features and customizable options make it a valuable tool for developers looking to create dynamic and responsive tables.
小伙伴们，上文介绍了“bootstrap table 英文api”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/701473.html
微信扫一扫 