如何使用bootstraptable将{id: 1, name: '111', phone: '111', company: '111', message: '111',}放入表格中并分页 每页10条
时间: 2023-12-17 22:02:25 浏览: 56
可以按照以下步骤使用Bootstrap Table将数据放入表格中并分页:
1. 在HTML文件中引入Bootstrap Table的CSS和JS文件:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
```
2. 在HTML文件中创建一个表格的容器和分页的容器:
```html
<table id="myTable"></table>
<div id="myPagination"></div>
```
3. 在JS文件中定义数据和分页参数:
```javascript
var data = [
{id: 1, name: '111', phone: '111', company: '111', message: '111'},
// 其他数据
];
var pageSize = 10; // 每页显示10条记录
var totalRows = data.length; // 总记录数
var totalPages = Math.ceil(totalRows / pageSize); // 总页数
var currentPage = 1; // 当前页码
```
4. 在JS文件中初始化表格并将数据加载到表格中:
```javascript
$(function() {
$('#myTable').bootstrapTable({
data: data.slice((currentPage - 1) * pageSize, currentPage * pageSize),
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'phone',
title: '电话'
}, {
field: 'company',
title: '公司'
}, {
field: 'message',
title: '留言'
}]
});
});
```
这里使用了slice方法将数据分页,根据当前页码和每页显示的记录数来计算出需要显示的数据。
5. 在JS文件中初始化分页:
```javascript
$(function() {
$('#myPagination').bootstrapPaginator({
currentPage: currentPage,
totalPages: totalPages,
size: 'normal',
bootstrapMajorVersion: 3,
alignment: 'right',
onPageChanged: function(event, oldPage, newPage) {
currentPage = newPage;
$('#myTable').bootstrapTable('load', data.slice((currentPage - 1) * pageSize, currentPage * pageSize));
}
});
});
```
这里使用了Bootstrap Paginator插件来实现分页功能。在onPageChanged事件中,根据新的页码重新加载数据到表格中。
这样就可以将数据加载到Bootstrap Table中的表格中并实现分页了。注意,要先引入jQuery库和Bootstrap Paginator插件。另外,可以根据实际情况修改columns中的字段和标题。