1. Introduce
bootstrap depends on jquery
bootstrap-table depends on bootstrap, so it needs to be introduced
2. There are two ways of bootstrap-table, html, js
<table id="table" class="table table-bordered table-hover"
data-toggle="table" //Enable bootstrap table
data-classes="table table-hover"
data-show-columns="true" //Whether to display the content column drop-down box.
data-striped="true" //Set it to true
have interlaced color changing effect
data-show-toggle="true" //Whether to display the toggle view (table/card) button.
data-search="true" //whether to display the search box
data-show-refresh="true" //Whether to show the refresh button
data-toolbar="#toolbar" //Toolbar
data-height="500"> //Set the table height - fixed header takes effect
<thead>
<tr>
<th>Table ID</th>
<th>表格 Name</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
<th>Table Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
</table>
js way
<table id="table"></table> <script> $("#table").bootstrapTable({ toolbar: "#toolbar", striped: true , // whether to display line interval color height: 300 , sortable: false , // whether to sort search: true , // whether to display table search, this search is a client-side search and will not enter the server strictSearch: true , // whether to display refresh showColumns: true , // whether to display all Column showRefresh: true , // whether to display the refresh button minimumCountColumns: 2 , // minimum allowed number of columns showToggle: true , // whether to display the toggle button between the detailed view and the list view cardView: false , // whether to display the detailed view columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }], // data can be replaced with url data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 3, name: 'Item 3', price: '$3' }, { id: 4, name: 'Item 4', price: '$4' }, { id: 5, name: 'Item 5', price: '$5' }, { id: 6, name: 'Item 6', price: '$6' }, { id: 7, name: 'Item 7', price: '$7' }, { id: 8, name: 'Item 8', price: '$8' }, { id: 9, name: 'Item 9', price: '$9' }, { id: 10, name: 'Item 10', price: '$10' }] }) </script>
Fixed column code
$("#table").bootstrapTable('destroy').bootstrapTable({
fixedColumns: true,
fixedNumber: 1 //fixed number of columns
}
3. Problem solving
Fixed header display dislocation
Solution: Add width data-width="60px" to th
Fixed columns will also be dislocated
Solution: All content is not folded and displayed on one line (it feels like the difference caused by line-height)
Fixed header fixed column overlapped header part is not fixed when scrolling left and right
Solution: Manually add layers to the overlapping part
When the browser window changes, the header is not aligned with the table, what should I do?
$('#tableId').bootstrapTable(); // init via javascript
$(window).resize(function () {
$('#tableId').bootstrapTable('resetView');
});
4. Download address
bootstrap-table:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
bootstrap-table-fixed-columns:https://github.com/wenzhixin/bootstrap-table-fixed-columns